<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>
	.KEYW {color: #933;}
	.COMM {color: #bbb; font-style: italic;}
	.NUMB {color: #393;}
	.STRN {color: #393;}
	.REGX {color: #339;}
	.line {border-right: 1px dotted #666; color: #666; font-style: normal;}
	</style></head><body><pre><span class='line'>  1</span> <span class="COMM">/**
<span class='line'>  2</span>  * @file timeline.js
<span class='line'>  3</span>  *
<span class='line'>  4</span>  * @brief
<span class='line'>  5</span>  * The Timeline is an interactive visualization chart to visualize events in
<span class='line'>  6</span>  * time, having a start and end date.
<span class='line'>  7</span>  * You can freely move and zoom in the timeline by dragging
<span class='line'>  8</span>  * and scrolling in the Timeline. Items are optionally dragable. The time
<span class='line'>  9</span>  * scale on the axis is adjusted automatically, and supports scales ranging
<span class='line'> 10</span>  * from milliseconds to years.
<span class='line'> 11</span>  *
<span class='line'> 12</span>  * Timeline is part of the CHAP Links library.
<span class='line'> 13</span>  *
<span class='line'> 14</span>  * Timeline is tested on Firefox 3.6, Safari 5.0, Chrome 6.0, Opera 10.6, and
<span class='line'> 15</span>  * Internet Explorer 6+.
<span class='line'> 16</span>  *
<span class='line'> 17</span>  * @license
<span class='line'> 18</span>  * Licensed under the Apache License, Version 2.0 (the "License"); you may not
<span class='line'> 19</span>  * use this file except in compliance with the License. You may obtain a copy
<span class='line'> 20</span>  * of the License at
<span class='line'> 21</span>  *
<span class='line'> 22</span>  * http://www.apache.org/licenses/LICENSE-2.0
<span class='line'> 23</span>  *
<span class='line'> 24</span>  * Unless required by applicable law or agreed to in writing, software
<span class='line'> 25</span>  * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
<span class='line'> 26</span>  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
<span class='line'> 27</span>  * License for the specific language governing permissions and limitations under
<span class='line'> 28</span>  * the License.
<span class='line'> 29</span>  *
<span class='line'> 30</span>  * Copyright (c) 2011-2012 Almende B.V.
<span class='line'> 31</span>  *
<span class='line'> 32</span>  * @author 	Jos de Jong, &lt;jos@almende.org>
<span class='line'> 33</span>  * @date    2013-03-04
<span class='line'> 34</span>  * @version 2.4.1
<span class='line'> 35</span>  */</span><span class="WHIT">
<span class='line'> 36</span> 
<span class='line'> 37</span> </span><span class="COMM">/*
<span class='line'> 38</span>  * TODO
<span class='line'> 39</span>  *
<span class='line'> 40</span>  * Add zooming with pinching on Android
<span class='line'> 41</span>  * 
<span class='line'> 42</span>  * Bug: when an item contains a javascript onclick or a link, this does not work
<span class='line'> 43</span>  *      when the item is not selected (when the item is being selected,
<span class='line'> 44</span>  *      it is redrawn, which cancels any onclick or link action)
<span class='line'> 45</span>  * Bug: when an item contains an image without size, or a css max-width, it is not sized correctly
<span class='line'> 46</span>  * Bug: neglect items when they have no valid start/end, instead of throwing an error
<span class='line'> 47</span>  * Bug: Pinching on ipad does not work very well, sometimes the page will zoom when pinching vertically
<span class='line'> 48</span>  * Bug: cannot set max width for an item, like div.timeline-event-content {white-space: normal; max-width: 100px;}
<span class='line'> 49</span>  * Bug on IE in Quirks mode. When you have groups, and delete an item, the groups become invisible
<span class='line'> 50</span>  */</span><span class="WHIT">
<span class='line'> 51</span> 
<span class='line'> 52</span> </span><span class="COMM">/**
<span class='line'> 53</span>  * Declare a unique namespace for CHAP's Common Hybrid Visualisation Library,
<span class='line'> 54</span>  * "links"
<span class='line'> 55</span>  */</span><span class="WHIT">
<span class='line'> 56</span> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">typeof</span><span class="WHIT"> </span><span class="NAME">links</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">'undefined'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 57</span> </span><span class="WHIT">    </span><span class="NAME">links</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 58</span> </span><span class="WHIT">    </span><span class="COMM">// important: do not use var, as "var links = {};" will overwrite </span><span class="WHIT">
<span class='line'> 59</span> </span><span class="WHIT">    </span><span class="COMM">//            the existing links variable value with undefined in IE8, IE7.  </span><span class="WHIT">
<span class='line'> 60</span> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 61</span> 
<span class='line'> 62</span> 
<span class='line'> 63</span> </span><span class="COMM">/**
<span class='line'> 64</span>  * Ensure the variable google exists
<span class='line'> 65</span>  */</span><span class="WHIT">
<span class='line'> 66</span> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">typeof</span><span class="WHIT"> </span><span class="NAME">google</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">'undefined'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 67</span> </span><span class="WHIT">    </span><span class="NAME">google</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 68</span> </span><span class="WHIT">    </span><span class="COMM">// important: do not use var, as "var google = undefined;" will overwrite </span><span class="WHIT">
<span class='line'> 69</span> </span><span class="WHIT">    </span><span class="COMM">//            the existing google variable value with undefined in IE8, IE7.</span><span class="WHIT">
<span class='line'> 70</span> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 71</span> 
<span class='line'> 72</span> 
<span class='line'> 73</span> 
<span class='line'> 74</span> </span><span class="COMM">// Internet Explorer 8 and older does not support Array.indexOf,</span><span class="WHIT">
<span class='line'> 75</span> </span><span class="COMM">// so we define it here in that case</span><span class="WHIT">
<span class='line'> 76</span> </span><span class="COMM">// http://soledadpenades.com/2007/05/17/arrayindexof-in-internet-explorer/</span><span class="WHIT">
<span class='line'> 77</span> </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">Array.prototype.indexOf</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 78</span> </span><span class="WHIT">    </span><span class="NAME">Array.prototype.indexOf</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">obj</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 79</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">this.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 80</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">obj</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 81</span> </span><span class="WHIT">                </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 82</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 83</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 84</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 85</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 86</span> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 87</span> 
<span class='line'> 88</span> </span><span class="COMM">// Internet Explorer 8 and older does not support Array.forEach,</span><span class="WHIT">
<span class='line'> 89</span> </span><span class="COMM">// so we define it here in that case</span><span class="WHIT">
<span class='line'> 90</span> </span><span class="COMM">// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach</span><span class="WHIT">
<span class='line'> 91</span> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">Array.prototype.forEach</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 92</span> </span><span class="WHIT">    </span><span class="NAME">Array.prototype.forEach</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">fn</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">scope</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 93</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">len</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">len</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="PUNC">++</span><span class="NAME">i</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 94</span> </span><span class="WHIT">            </span><span class="NAME">fn.call</span><span class="PUNC">(</span><span class="NAME">scope</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 95</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 96</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 97</span> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 98</span> 
<span class='line'> 99</span> 
<span class='line'>100</span> </span><span class="COMM">/**
<span class='line'>101</span>  * @constructor links.Timeline
<span class='line'>102</span>  * The timeline is a visualization chart to visualize events in time.
<span class='line'>103</span>  *
<span class='line'>104</span>  * The timeline is developed in javascript as a Google Visualization Chart.
<span class='line'>105</span>  *
<span class='line'>106</span>  * @param {Element} container   The DOM element in which the Timeline will
<span class='line'>107</span>  *                                  be created. Normally a div element.
<span class='line'>108</span>  */</span><span class="WHIT">
<span class='line'>109</span> </span><span class="NAME">links.Timeline</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">container</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>110</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">container</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>111</span> </span><span class="WHIT">        </span><span class="COMM">// this call was probably only for inheritance, no constructor-code is required</span><span class="WHIT">
<span class='line'>112</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>113</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>114</span> 
<span class='line'>115</span> </span><span class="WHIT">    </span><span class="COMM">// create variables and set default values</span><span class="WHIT">
<span class='line'>116</span> </span><span class="WHIT">    </span><span class="NAME">this.dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>117</span> </span><span class="WHIT">    </span><span class="NAME">this.conversion</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>118</span> </span><span class="WHIT">    </span><span class="NAME">this.eventParams</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// stores parameters for mouse events</span><span class="WHIT">
<span class='line'>119</span> </span><span class="WHIT">    </span><span class="NAME">this.groups</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>120</span> </span><span class="WHIT">    </span><span class="NAME">this.groupIndexes</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>121</span> </span><span class="WHIT">    </span><span class="NAME">this.items</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>122</span> </span><span class="WHIT">    </span><span class="NAME">this.renderQueue</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>123</span> </span><span class="WHIT">        </span><span class="NAME">show</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">   </span><span class="COMM">// Items made visible but not yet added to DOM</span><span class="WHIT">
<span class='line'>124</span> </span><span class="WHIT">        </span><span class="NAME">hide</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">   </span><span class="COMM">// Items currently visible but not yet removed from DOM</span><span class="WHIT">
<span class='line'>125</span> </span><span class="WHIT">        </span><span class="NAME">update</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="WHIT">  </span><span class="COMM">// Items with changed data but not yet adjusted DOM</span><span class="WHIT">
<span class='line'>126</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>127</span> </span><span class="WHIT">    </span><span class="NAME">this.renderedItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="COMM">// Items currently rendered in the DOM</span><span class="WHIT">
<span class='line'>128</span> </span><span class="WHIT">    </span><span class="NAME">this.clusterGenerator</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">links.Timeline.ClusterGenerator</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>129</span> </span><span class="WHIT">    </span><span class="NAME">this.currentClusters</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>130</span> </span><span class="WHIT">    </span><span class="NAME">this.selection</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// stores index and item which is currently selected</span><span class="WHIT">
<span class='line'>131</span> 
<span class='line'>132</span> </span><span class="WHIT">    </span><span class="NAME">this.listeners</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// event listener callbacks</span><span class="WHIT">
<span class='line'>133</span> 
<span class='line'>134</span> </span><span class="WHIT">    </span><span class="COMM">// Initialize sizes. </span><span class="WHIT">
<span class='line'>135</span> </span><span class="WHIT">    </span><span class="COMM">// Needed for IE (which gives an error when you try to set an undefined</span><span class="WHIT">
<span class='line'>136</span> </span><span class="WHIT">    </span><span class="COMM">// value in a style)</span><span class="WHIT">
<span class='line'>137</span> </span><span class="WHIT">    </span><span class="NAME">this.size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>138</span> </span><span class="WHIT">        </span><span class="STRN">'actualHeight'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>139</span> </span><span class="WHIT">        </span><span class="STRN">'axis'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>140</span> </span><span class="WHIT">            </span><span class="STRN">'characterMajorHeight'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>141</span> </span><span class="WHIT">            </span><span class="STRN">'characterMajorWidth'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>142</span> </span><span class="WHIT">            </span><span class="STRN">'characterMinorHeight'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>143</span> </span><span class="WHIT">            </span><span class="STRN">'characterMinorWidth'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>144</span> </span><span class="WHIT">            </span><span class="STRN">'height'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>145</span> </span><span class="WHIT">            </span><span class="STRN">'labelMajorTop'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>146</span> </span><span class="WHIT">            </span><span class="STRN">'labelMinorTop'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>147</span> </span><span class="WHIT">            </span><span class="STRN">'line'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>148</span> </span><span class="WHIT">            </span><span class="STRN">'lineMajorWidth'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>149</span> </span><span class="WHIT">            </span><span class="STRN">'lineMinorHeight'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>150</span> </span><span class="WHIT">            </span><span class="STRN">'lineMinorTop'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>151</span> </span><span class="WHIT">            </span><span class="STRN">'lineMinorWidth'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>152</span> </span><span class="WHIT">            </span><span class="STRN">'top'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="WHIT">
<span class='line'>153</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>154</span> </span><span class="WHIT">        </span><span class="STRN">'contentHeight'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>155</span> </span><span class="WHIT">        </span><span class="STRN">'contentLeft'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>156</span> </span><span class="WHIT">        </span><span class="STRN">'contentWidth'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>157</span> </span><span class="WHIT">        </span><span class="STRN">'frameHeight'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>158</span> </span><span class="WHIT">        </span><span class="STRN">'frameWidth'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>159</span> </span><span class="WHIT">        </span><span class="STRN">'groupsLeft'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>160</span> </span><span class="WHIT">        </span><span class="STRN">'groupsWidth'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>161</span> </span><span class="WHIT">        </span><span class="STRN">'items'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>162</span> </span><span class="WHIT">            </span><span class="STRN">'top'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="WHIT">
<span class='line'>163</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>164</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>165</span> 
<span class='line'>166</span> </span><span class="WHIT">    </span><span class="NAME">this.dom.container</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">container</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>167</span> 
<span class='line'>168</span> </span><span class="WHIT">    </span><span class="NAME">this.options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>169</span> </span><span class="WHIT">        </span><span class="STRN">'width'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">"100%"</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>170</span> </span><span class="WHIT">        </span><span class="STRN">'height'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">"auto"</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>171</span> </span><span class="WHIT">        </span><span class="STRN">'minHeight'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">        </span><span class="COMM">// minimal height in pixels</span><span class="WHIT">
<span class='line'>172</span> </span><span class="WHIT">        </span><span class="STRN">'autoHeight'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>173</span> 
<span class='line'>174</span> </span><span class="WHIT">        </span><span class="STRN">'eventMargin'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">,</span><span class="WHIT">     </span><span class="COMM">// minimal margin between events</span><span class="WHIT">
<span class='line'>175</span> </span><span class="WHIT">        </span><span class="STRN">'eventMarginAxis'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">20</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="COMM">// minimal margin between events and the axis</span><span class="WHIT">
<span class='line'>176</span> </span><span class="WHIT">        </span><span class="STRN">'dragAreaWidth'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">,</span><span class="WHIT">   </span><span class="COMM">// pixels</span><span class="WHIT">
<span class='line'>177</span> 
<span class='line'>178</span> </span><span class="WHIT">        </span><span class="STRN">'min'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>179</span> </span><span class="WHIT">        </span><span class="STRN">'max'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>180</span> </span><span class="WHIT">        </span><span class="STRN">'intervalMin'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">,</span><span class="WHIT">     </span><span class="COMM">// milliseconds</span><span class="WHIT">
<span class='line'>181</span> </span><span class="WHIT">        </span><span class="STRN">'intervalMax'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">1000</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">24</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">365</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">10000</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="COMM">// milliseconds</span><span class="WHIT">
<span class='line'>182</span> 
<span class='line'>183</span> </span><span class="WHIT">        </span><span class="STRN">'moveable'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>184</span> </span><span class="WHIT">        </span><span class="STRN">'zoomable'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>185</span> </span><span class="WHIT">        </span><span class="STRN">'selectable'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>186</span> </span><span class="WHIT">        </span><span class="STRN">'editable'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>187</span> </span><span class="WHIT">        </span><span class="STRN">'snapEvents'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>188</span> </span><span class="WHIT">        </span><span class="STRN">'groupChangeable'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>189</span> 
<span class='line'>190</span> </span><span class="WHIT">        </span><span class="STRN">'showCurrentTime'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="COMM">// show a red bar displaying the current time</span><span class="WHIT">
<span class='line'>191</span> </span><span class="WHIT">        </span><span class="STRN">'showCustomTime'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="COMM">// show a blue, draggable bar displaying a custom time    </span><span class="WHIT">
<span class='line'>192</span> </span><span class="WHIT">        </span><span class="STRN">'showMajorLabels'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>193</span> </span><span class="WHIT">        </span><span class="STRN">'showMinorLabels'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>194</span> </span><span class="WHIT">        </span><span class="STRN">'showNavigation'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>195</span> </span><span class="WHIT">        </span><span class="STRN">'showButtonNew'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>196</span> </span><span class="WHIT">        </span><span class="STRN">'groupsOnRight'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>197</span> </span><span class="WHIT">        </span><span class="STRN">'axisOnTop'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>198</span> </span><span class="WHIT">        </span><span class="STRN">'stackEvents'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>199</span> </span><span class="WHIT">        </span><span class="STRN">'animate'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>200</span> </span><span class="WHIT">        </span><span class="STRN">'animateZoom'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>201</span> </span><span class="WHIT">        </span><span class="STRN">'cluster'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>202</span> </span><span class="WHIT">        </span><span class="STRN">'style'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">'box'</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>203</span> </span><span class="WHIT">        </span><span class="STRN">'customStackOrder'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="WHIT"> </span><span class="COMM">//a function(a,b) for determining stackorder amongst a group of items. Essentially a comparator, -ve value for "a before b" and vice versa</span><span class="WHIT">
<span class='line'>204</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>205</span> 
<span class='line'>206</span> </span><span class="WHIT">    </span><span class="NAME">this.clientTimeOffset</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">    </span><span class="COMM">// difference between client time and the time</span><span class="WHIT">
<span class='line'>207</span> </span><span class="WHIT">    </span><span class="COMM">// set via Timeline.setCurrentTime()</span><span class="WHIT">
<span class='line'>208</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>209</span> 
<span class='line'>210</span> </span><span class="WHIT">    </span><span class="COMM">// remove all elements from the container element.</span><span class="WHIT">
<span class='line'>211</span> </span><span class="WHIT">    </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.container.hasChildNodes</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>212</span> </span><span class="WHIT">        </span><span class="NAME">dom.container.removeChild</span><span class="PUNC">(</span><span class="NAME">dom.container.firstChild</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>213</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>214</span> 
<span class='line'>215</span> </span><span class="WHIT">    </span><span class="COMM">// create a step for drawing the axis</span><span class="WHIT">
<span class='line'>216</span> </span><span class="WHIT">    </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>217</span> 
<span class='line'>218</span> </span><span class="WHIT">    </span><span class="COMM">// add standard item types</span><span class="WHIT">
<span class='line'>219</span> </span><span class="WHIT">    </span><span class="NAME">this.itemTypes</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>220</span> </span><span class="WHIT">        </span><span class="NAME">box</span><span class="PUNC">:</span><span class="WHIT">   </span><span class="NAME">links.Timeline.ItemBox</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>221</span> </span><span class="WHIT">        </span><span class="NAME">range</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">links.Timeline.ItemRange</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>222</span> </span><span class="WHIT">        </span><span class="NAME">dot</span><span class="PUNC">:</span><span class="WHIT">   </span><span class="NAME">links.Timeline.ItemDot</span><span class="WHIT">
<span class='line'>223</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>224</span> 
<span class='line'>225</span> </span><span class="WHIT">    </span><span class="COMM">// initialize data</span><span class="WHIT">
<span class='line'>226</span> </span><span class="WHIT">    </span><span class="NAME">this.data</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>227</span> </span><span class="WHIT">    </span><span class="NAME">this.firstDraw</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>228</span> 
<span class='line'>229</span> </span><span class="WHIT">    </span><span class="COMM">// date interval must be initialized </span><span class="WHIT">
<span class='line'>230</span> </span><span class="WHIT">    </span><span class="NAME">this.setVisibleChartRange</span><span class="PUNC">(</span><span class="NAME">undefined</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>231</span> 
<span class='line'>232</span> </span><span class="WHIT">    </span><span class="COMM">// render for the first time</span><span class="WHIT">
<span class='line'>233</span> </span><span class="WHIT">    </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>234</span> 
<span class='line'>235</span> </span><span class="WHIT">    </span><span class="COMM">// fire the ready event</span><span class="WHIT">
<span class='line'>236</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">me</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>237</span> </span><span class="WHIT">    </span><span class="NAME">setTimeout</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>238</span> </span><span class="WHIT">        </span><span class="NAME">me.trigger</span><span class="PUNC">(</span><span class="STRN">'ready'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>239</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>240</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>241</span> 
<span class='line'>242</span> 
<span class='line'>243</span> </span><span class="COMM">/**
<span class='line'>244</span>  * Main drawing logic. This is the function that needs to be called
<span class='line'>245</span>  * in the html page, to draw the timeline.
<span class='line'>246</span>  *
<span class='line'>247</span>  * A data table with the events must be provided, and an options table.
<span class='line'>248</span>  *
<span class='line'>249</span>  * @param {google.visualization.DataTable}      data
<span class='line'>250</span>  *                                 The data containing the events for the timeline.
<span class='line'>251</span>  *                                 Object DataTable is defined in
<span class='line'>252</span>  *                                 google.visualization.DataTable
<span class='line'>253</span>  * @param {Object} options         A name/value map containing settings for the
<span class='line'>254</span>  *                                 timeline. Optional.
<span class='line'>255</span>  */</span><span class="WHIT">
<span class='line'>256</span> </span><span class="NAME">links.Timeline.prototype.draw</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">data</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">options</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>257</span> </span><span class="WHIT">    </span><span class="NAME">this.setOptions</span><span class="PUNC">(</span><span class="NAME">options</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>258</span> 
<span class='line'>259</span> </span><span class="WHIT">    </span><span class="COMM">// read the data</span><span class="WHIT">
<span class='line'>260</span> </span><span class="WHIT">    </span><span class="NAME">this.setData</span><span class="PUNC">(</span><span class="NAME">data</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>261</span> 
<span class='line'>262</span> </span><span class="WHIT">    </span><span class="COMM">// set timer range. this will also redraw the timeline</span><span class="WHIT">
<span class='line'>263</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.start</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">options.end</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>264</span> </span><span class="WHIT">        </span><span class="NAME">this.setVisibleChartRange</span><span class="PUNC">(</span><span class="NAME">options.start</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">options.end</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>265</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>266</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.firstDraw</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>267</span> </span><span class="WHIT">        </span><span class="NAME">this.setVisibleChartRangeAuto</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>268</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>269</span> 
<span class='line'>270</span> </span><span class="WHIT">    </span><span class="NAME">this.firstDraw</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>271</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>272</span> 
<span class='line'>273</span> 
<span class='line'>274</span> </span><span class="COMM">/**
<span class='line'>275</span>  * Set options for the timeline.
<span class='line'>276</span>  * Timeline must be redrawn afterwards
<span class='line'>277</span>  * @param {Object} options A name/value map containing settings for the
<span class='line'>278</span>  *                                 timeline. Optional.
<span class='line'>279</span>  */</span><span class="WHIT">
<span class='line'>280</span> </span><span class="NAME">links.Timeline.prototype.setOptions</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">options</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>281</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>282</span> </span><span class="WHIT">        </span><span class="COMM">// retrieve parameter values</span><span class="WHIT">
<span class='line'>283</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="KEYW">in</span><span class="WHIT"> </span><span class="NAME">options</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>284</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.hasOwnProperty</span><span class="PUNC">(</span><span class="NAME">i</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>285</span> </span><span class="WHIT">                </span><span class="NAME">this.options</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>286</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>287</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>288</span> 
<span class='line'>289</span> </span><span class="WHIT">        </span><span class="COMM">// check for deprecated options</span><span class="WHIT">
<span class='line'>290</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.showButtonAdd</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>291</span> </span><span class="WHIT">            </span><span class="NAME">this.options.showButtonNew</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.showButtonAdd</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>292</span> </span><span class="WHIT">            </span><span class="NAME">console.log</span><span class="PUNC">(</span><span class="STRN">'WARNING: Option showButtonAdd is deprecated. Use showButtonNew instead'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>293</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>294</span> 
<span class='line'>295</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.scale</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">options.step</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>296</span> </span><span class="WHIT">            </span><span class="NAME">this.step.setScale</span><span class="PUNC">(</span><span class="NAME">options.scale</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">options.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>297</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>298</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>299</span> 
<span class='line'>300</span> </span><span class="WHIT">    </span><span class="COMM">// validate options</span><span class="WHIT">
<span class='line'>301</span> </span><span class="WHIT">    </span><span class="NAME">this.options.autoHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.options.height</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">"auto"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>302</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>303</span> 
<span class='line'>304</span> </span><span class="COMM">/**
<span class='line'>305</span>  * Add new type of items
<span class='line'>306</span>  * @param {String} typeName  Name of new type
<span class='line'>307</span>  * @param {links.Timeline.Item} typeFactory Constructor of items
<span class='line'>308</span>  */</span><span class="WHIT">
<span class='line'>309</span> </span><span class="NAME">links.Timeline.prototype.addItemType</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">typeName</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">typeFactory</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>310</span> </span><span class="WHIT">    </span><span class="NAME">this.itemTypes</span><span class="PUNC">[</span><span class="NAME">typeName</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">typeFactory</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>311</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>312</span> 
<span class='line'>313</span> </span><span class="COMM">/**
<span class='line'>314</span>  * Retrieve a map with the column indexes of the columns by column name.
<span class='line'>315</span>  * For example, the method returns the map
<span class='line'>316</span>  *     {
<span class='line'>317</span>  *         start: 0,
<span class='line'>318</span>  *         end: 1,
<span class='line'>319</span>  *         content: 2,
<span class='line'>320</span>  *         group: undefined,
<span class='line'>321</span>  *         className: undefined
<span class='line'>322</span>  *     }
<span class='line'>323</span>  * @param {google.visualization.DataTable} dataTable
<span class='line'>324</span>  * @type {Object} map
<span class='line'>325</span>  */</span><span class="WHIT">
<span class='line'>326</span> </span><span class="NAME">links.Timeline.mapColumnIds</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dataTable</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>327</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">cols</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>328</span> </span><span class="WHIT">        </span><span class="NAME">colMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dataTable.getNumberOfColumns</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>329</span> </span><span class="WHIT">        </span><span class="NAME">allUndefined</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>330</span> 
<span class='line'>331</span> </span><span class="WHIT">    </span><span class="COMM">// loop over the columns, and map the column id's to the column indexes</span><span class="WHIT">
<span class='line'>332</span> </span><span class="WHIT">    </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">col</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">col</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">colMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">col</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>333</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">id</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dataTable.getColumnId</span><span class="PUNC">(</span><span class="NAME">col</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">dataTable.getColumnLabel</span><span class="PUNC">(</span><span class="NAME">col</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>334</span> </span><span class="WHIT">        </span><span class="NAME">cols</span><span class="PUNC">[</span><span class="NAME">id</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">col</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>335</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">id</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">'start'</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">id</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">'end'</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">id</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">'content'</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT">
<span class='line'>336</span> </span><span class="WHIT">            </span><span class="NAME">id</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">'group'</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">id</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">'className'</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">id</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">'editable'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>337</span> </span><span class="WHIT">            </span><span class="NAME">allUndefined</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>338</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>339</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>340</span> 
<span class='line'>341</span> </span><span class="WHIT">    </span><span class="COMM">// if no labels or ids are defined,</span><span class="WHIT">
<span class='line'>342</span> </span><span class="WHIT">    </span><span class="COMM">// use the default mapping for start, end, content</span><span class="WHIT">
<span class='line'>343</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">allUndefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>344</span> </span><span class="WHIT">        </span><span class="NAME">cols.start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>345</span> </span><span class="WHIT">        </span><span class="NAME">cols.end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>346</span> </span><span class="WHIT">        </span><span class="NAME">cols.content</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>347</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>348</span> 
<span class='line'>349</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">cols</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>350</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>351</span> 
<span class='line'>352</span> </span><span class="COMM">/**
<span class='line'>353</span>  * Set data for the timeline
<span class='line'>354</span>  * @param {google.visualization.DataTable | Array} data
<span class='line'>355</span>  */</span><span class="WHIT">
<span class='line'>356</span> </span><span class="NAME">links.Timeline.prototype.setData</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">data</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>357</span> </span><span class="WHIT">    </span><span class="COMM">// unselect any previously selected item</span><span class="WHIT">
<span class='line'>358</span> </span><span class="WHIT">    </span><span class="NAME">this.unselectItem</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>359</span> 
<span class='line'>360</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">data</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>361</span> </span><span class="WHIT">        </span><span class="NAME">data</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>362</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>363</span> 
<span class='line'>364</span> </span><span class="WHIT">    </span><span class="COMM">// clear all data</span><span class="WHIT">
<span class='line'>365</span> </span><span class="WHIT">    </span><span class="NAME">this.stackCancelAnimation</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>366</span> </span><span class="WHIT">    </span><span class="NAME">this.clearItems</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>367</span> </span><span class="WHIT">    </span><span class="NAME">this.data</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">data</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>368</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">items</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.items</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>369</span> </span><span class="WHIT">    </span><span class="NAME">this.deleteGroups</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>370</span> 
<span class='line'>371</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">google</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">google.visualization</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT">
<span class='line'>372</span> </span><span class="WHIT">        </span><span class="NAME">data</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">google.visualization.DataTable</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>373</span> </span><span class="WHIT">        </span><span class="COMM">// map the datatable columns</span><span class="WHIT">
<span class='line'>374</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">cols</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.mapColumnIds</span><span class="PUNC">(</span><span class="NAME">data</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>375</span> 
<span class='line'>376</span> </span><span class="WHIT">        </span><span class="COMM">// read DataTable</span><span class="WHIT">
<span class='line'>377</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">row</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">rows</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">data.getNumberOfRows</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">row</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">rows</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">row</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>378</span> </span><span class="WHIT">            </span><span class="NAME">items.push</span><span class="PUNC">(</span><span class="NAME">this.createItem</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>379</span> </span><span class="WHIT">                </span><span class="STRN">'start'</span><span class="PUNC">:</span><span class="WHIT">     </span><span class="PUNC">(</span><span class="PUNC">(</span><span class="NAME">cols.start</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT">     </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">data.getValue</span><span class="PUNC">(</span><span class="NAME">row</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">cols.start</span><span class="PUNC">)</span><span class="WHIT">     </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>380</span> </span><span class="WHIT">                </span><span class="STRN">'end'</span><span class="PUNC">:</span><span class="WHIT">       </span><span class="PUNC">(</span><span class="PUNC">(</span><span class="NAME">cols.end</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT">       </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">data.getValue</span><span class="PUNC">(</span><span class="NAME">row</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">cols.end</span><span class="PUNC">)</span><span class="WHIT">       </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>381</span> </span><span class="WHIT">                </span><span class="STRN">'content'</span><span class="PUNC">:</span><span class="WHIT">   </span><span class="PUNC">(</span><span class="PUNC">(</span><span class="NAME">cols.content</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT">   </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">data.getValue</span><span class="PUNC">(</span><span class="NAME">row</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">cols.content</span><span class="PUNC">)</span><span class="WHIT">   </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>382</span> </span><span class="WHIT">                </span><span class="STRN">'group'</span><span class="PUNC">:</span><span class="WHIT">     </span><span class="PUNC">(</span><span class="PUNC">(</span><span class="NAME">cols.group</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT">     </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">data.getValue</span><span class="PUNC">(</span><span class="NAME">row</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">cols.group</span><span class="PUNC">)</span><span class="WHIT">     </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>383</span> </span><span class="WHIT">                </span><span class="STRN">'className'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">(</span><span class="NAME">cols.className</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">data.getValue</span><span class="PUNC">(</span><span class="NAME">row</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">cols.className</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>384</span> </span><span class="WHIT">                </span><span class="STRN">'editable'</span><span class="PUNC">:</span><span class="WHIT">  </span><span class="PUNC">(</span><span class="PUNC">(</span><span class="NAME">cols.editable</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT">  </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">data.getValue</span><span class="PUNC">(</span><span class="NAME">row</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">cols.editable</span><span class="PUNC">)</span><span class="WHIT">  </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>385</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>386</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>387</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>388</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">links.Timeline.isArray</span><span class="PUNC">(</span><span class="NAME">data</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>389</span> </span><span class="WHIT">        </span><span class="COMM">// read JSON array</span><span class="WHIT">
<span class='line'>390</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">row</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">rows</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">data.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">row</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">rows</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">row</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>391</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">itemData</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">data</span><span class="PUNC">[</span><span class="NAME">row</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>392</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.createItem</span><span class="PUNC">(</span><span class="NAME">itemData</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>393</span> </span><span class="WHIT">            </span><span class="NAME">items.push</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>394</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>395</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>396</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>397</span> </span><span class="WHIT">        </span><span class="KEYW">throw</span><span class="WHIT"> </span><span class="STRN">"Unknown data type. DataTable or Array expected."</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>398</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>399</span> 
<span class='line'>400</span> </span><span class="WHIT">    </span><span class="COMM">// prepare data for clustering, by filtering and sorting by type</span><span class="WHIT">
<span class='line'>401</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.options.cluster</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>402</span> </span><span class="WHIT">        </span><span class="NAME">this.clusterGenerator.setData</span><span class="PUNC">(</span><span class="NAME">this.items</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>403</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>404</span> 
<span class='line'>405</span> </span><span class="WHIT">    </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>406</span> </span><span class="WHIT">        </span><span class="NAME">animate</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="WHIT">
<span class='line'>407</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>408</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>409</span> 
<span class='line'>410</span> </span><span class="COMM">/**
<span class='line'>411</span>  * Return the original data table.
<span class='line'>412</span>  * @return {google.visualization.DataTable | Array} data
<span class='line'>413</span>  */</span><span class="WHIT">
<span class='line'>414</span> </span><span class="NAME">links.Timeline.prototype.getData</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT">  </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>415</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">this.data</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>416</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>417</span> 
<span class='line'>418</span> 
<span class='line'>419</span> </span><span class="COMM">/**
<span class='line'>420</span>  * Update the original data with changed start, end or group.
<span class='line'>421</span>  *
<span class='line'>422</span>  * @param {Number} index
<span class='line'>423</span>  * @param {Object} values   An object containing some of the following parameters:
<span class='line'>424</span>  *                          {Date} start,
<span class='line'>425</span>  *                          {Date} end,
<span class='line'>426</span>  *                          {String} content,
<span class='line'>427</span>  *                          {String} group
<span class='line'>428</span>  */</span><span class="WHIT">
<span class='line'>429</span> </span><span class="NAME">links.Timeline.prototype.updateData</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT">  </span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">values</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>430</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">data</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.data</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>431</span> </span><span class="WHIT">        </span><span class="NAME">prop</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>432</span> 
<span class='line'>433</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">google</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">google.visualization</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT">
<span class='line'>434</span> </span><span class="WHIT">        </span><span class="NAME">data</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">google.visualization.DataTable</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>435</span> </span><span class="WHIT">        </span><span class="COMM">// update the original google DataTable</span><span class="WHIT">
<span class='line'>436</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">missingRows</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">data.getNumberOfRows</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>437</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">missingRows</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>438</span> </span><span class="WHIT">            </span><span class="NAME">data.addRows</span><span class="PUNC">(</span><span class="NAME">missingRows</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>439</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>440</span> 
<span class='line'>441</span> </span><span class="WHIT">        </span><span class="COMM">// map the column id's by name</span><span class="WHIT">
<span class='line'>442</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">cols</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.mapColumnIds</span><span class="PUNC">(</span><span class="NAME">data</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>443</span> 
<span class='line'>444</span> </span><span class="WHIT">        </span><span class="COMM">// merge all fields from the provided data into the current data</span><span class="WHIT">
<span class='line'>445</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">prop</span><span class="WHIT"> </span><span class="KEYW">in</span><span class="WHIT"> </span><span class="NAME">values</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>446</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">values.hasOwnProperty</span><span class="PUNC">(</span><span class="NAME">prop</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>447</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">col</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">cols</span><span class="PUNC">[</span><span class="NAME">prop</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>448</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">col</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>449</span> </span><span class="WHIT">                    </span><span class="COMM">// create new column</span><span class="WHIT">
<span class='line'>450</span> </span><span class="WHIT">                    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">value</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">values</span><span class="PUNC">[</span><span class="NAME">prop</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>451</span> </span><span class="WHIT">                    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">valueType</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'string'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>452</span> </span><span class="WHIT">                    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">typeof</span><span class="PUNC">(</span><span class="NAME">value</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">'number'</span><span class="PUNC">)</span><span class="WHIT">       </span><span class="PUNC">{</span><span class="NAME">valueType</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'number'</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>453</span> </span><span class="WHIT">                    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">typeof</span><span class="PUNC">(</span><span class="NAME">value</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">'boolean'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="NAME">valueType</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'boolean'</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>454</span> </span><span class="WHIT">                    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">value</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">)</span><span class="WHIT">      </span><span class="PUNC">{</span><span class="NAME">valueType</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'datetime'</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>455</span> </span><span class="WHIT">                    </span><span class="NAME">col</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">data.addColumn</span><span class="PUNC">(</span><span class="NAME">valueType</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">prop</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>456</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>457</span> </span><span class="WHIT">                </span><span class="NAME">data.setValue</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">col</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">values</span><span class="PUNC">[</span><span class="NAME">prop</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>458</span> 
<span class='line'>459</span> </span><span class="WHIT">                </span><span class="COMM">// TODO: correctly serialize the start and end Date to the desired type (Date, String, or Number)</span><span class="WHIT">
<span class='line'>460</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>461</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>462</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>463</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">links.Timeline.isArray</span><span class="PUNC">(</span><span class="NAME">data</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>464</span> </span><span class="WHIT">        </span><span class="COMM">// update the original JSON table</span><span class="WHIT">
<span class='line'>465</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">row</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">data</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>466</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">row</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>467</span> </span><span class="WHIT">            </span><span class="NAME">row</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>468</span> </span><span class="WHIT">            </span><span class="NAME">data</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">row</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>469</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>470</span> 
<span class='line'>471</span> </span><span class="WHIT">        </span><span class="COMM">// merge all fields from the provided data into the current data</span><span class="WHIT">
<span class='line'>472</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">prop</span><span class="WHIT"> </span><span class="KEYW">in</span><span class="WHIT"> </span><span class="NAME">values</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>473</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">values.hasOwnProperty</span><span class="PUNC">(</span><span class="NAME">prop</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>474</span> </span><span class="WHIT">                </span><span class="NAME">row</span><span class="PUNC">[</span><span class="NAME">prop</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">values</span><span class="PUNC">[</span><span class="NAME">prop</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>475</span> 
<span class='line'>476</span> </span><span class="WHIT">                </span><span class="COMM">// TODO: correctly serialize the start and end Date to the desired type (Date, String, or Number)</span><span class="WHIT">
<span class='line'>477</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>478</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>479</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>480</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>481</span> </span><span class="WHIT">        </span><span class="KEYW">throw</span><span class="WHIT"> </span><span class="STRN">"Cannot update data, unknown type of data"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>482</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>483</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>484</span> 
<span class='line'>485</span> </span><span class="COMM">/**
<span class='line'>486</span>  * Find the item index from a given HTML element
<span class='line'>487</span>  * If no item index is found, undefined is returned
<span class='line'>488</span>  * @param {Element} element
<span class='line'>489</span>  * @return {Number | undefined} index
<span class='line'>490</span>  */</span><span class="WHIT">
<span class='line'>491</span> </span><span class="NAME">links.Timeline.prototype.getItemIndex</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">element</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>492</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">e</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">element</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>493</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>494</span> </span><span class="WHIT">        </span><span class="NAME">frame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.items.frame</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>495</span> </span><span class="WHIT">        </span><span class="NAME">items</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.items</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>496</span> </span><span class="WHIT">        </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>497</span> 
<span class='line'>498</span> </span><span class="WHIT">    </span><span class="COMM">// try to find the frame where the items are located in</span><span class="WHIT">
<span class='line'>499</span> </span><span class="WHIT">    </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">e.parentNode</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">e.parentNode</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">frame</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>500</span> </span><span class="WHIT">        </span><span class="NAME">e</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e.parentNode</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>501</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>502</span> 
<span class='line'>503</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">e.parentNode</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="NAME">frame</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>504</span> </span><span class="WHIT">        </span><span class="COMM">// yes! we have found the parent element of all items</span><span class="WHIT">
<span class='line'>505</span> </span><span class="WHIT">        </span><span class="COMM">// retrieve its id from the array with items</span><span class="WHIT">
<span class='line'>506</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">items.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>507</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">items</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="NAME">e</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>508</span> </span><span class="WHIT">                </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>509</span> </span><span class="WHIT">                </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>510</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>511</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>512</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>513</span> 
<span class='line'>514</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">index</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>515</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>516</span> 
<span class='line'>517</span> </span><span class="COMM">/**
<span class='line'>518</span>  * Set a new size for the timeline
<span class='line'>519</span>  * @param {string} width   Width in pixels or percentage (for example "800px"
<span class='line'>520</span>  *                         or "50%")
<span class='line'>521</span>  * @param {string} height  Height in pixels or percentage  (for example "400px"
<span class='line'>522</span>  *                         or "30%")
<span class='line'>523</span>  */</span><span class="WHIT">
<span class='line'>524</span> </span><span class="NAME">links.Timeline.prototype.setSize</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">width</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>525</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">width</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>526</span> </span><span class="WHIT">        </span><span class="NAME">this.options.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>527</span> </span><span class="WHIT">        </span><span class="NAME">this.dom.frame.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>528</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>529</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">height</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>530</span> </span><span class="WHIT">        </span><span class="NAME">this.options.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>531</span> </span><span class="WHIT">        </span><span class="NAME">this.options.autoHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.options.height</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">"auto"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>532</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT">  </span><span class="STRN">"auto"</span><span class="WHIT"> </span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>533</span> </span><span class="WHIT">            </span><span class="NAME">this.dom.frame.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>534</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>535</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>536</span> 
<span class='line'>537</span> </span><span class="WHIT">    </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>538</span> </span><span class="WHIT">        </span><span class="NAME">animate</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="WHIT">
<span class='line'>539</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>540</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>541</span> 
<span class='line'>542</span> 
<span class='line'>543</span> </span><span class="COMM">/**
<span class='line'>544</span>  * Set a new value for the visible range int the timeline.
<span class='line'>545</span>  * Set start undefined to include everything from the earliest date to end.
<span class='line'>546</span>  * Set end undefined to include everything from start to the last date.
<span class='line'>547</span>  * Example usage:
<span class='line'>548</span>  *    myTimeline.setVisibleChartRange(new Date("2010-08-22"),
<span class='line'>549</span>  *                                    new Date("2010-09-13"));
<span class='line'>550</span>  * @param {Date}   start     The start date for the timeline. optional
<span class='line'>551</span>  * @param {Date}   end       The end date for the timeline. optional
<span class='line'>552</span>  * @param {boolean} redraw   Optional. If true (default) the Timeline is
<span class='line'>553</span>  *                           directly redrawn
<span class='line'>554</span>  */</span><span class="WHIT">
<span class='line'>555</span> </span><span class="NAME">links.Timeline.prototype.setVisibleChartRange</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">start</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">redraw</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>556</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">range</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>557</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">start</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">!</span><span class="NAME">end</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>558</span> </span><span class="WHIT">        </span><span class="COMM">// retrieve the date range of the items</span><span class="WHIT">
<span class='line'>559</span> </span><span class="WHIT">        </span><span class="NAME">range</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getDataRange</span><span class="PUNC">(</span><span class="KEYW">true</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>560</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>561</span> 
<span class='line'>562</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">start</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>563</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">end</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>564</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">range.min</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">range.min.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>565</span> </span><span class="WHIT">                </span><span class="COMM">// start of the data</span><span class="WHIT">
<span class='line'>566</span> </span><span class="WHIT">                </span><span class="NAME">start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">range.min</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>567</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>568</span> </span><span class="WHIT">            </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>569</span> </span><span class="WHIT">                </span><span class="COMM">// 7 days before the end</span><span class="WHIT">
<span class='line'>570</span> </span><span class="WHIT">                </span><span class="NAME">start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>571</span> </span><span class="WHIT">                </span><span class="NAME">start.setDate</span><span class="PUNC">(</span><span class="NAME">start.getDate</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NUMB">7</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>572</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>573</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>574</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>575</span> </span><span class="WHIT">            </span><span class="COMM">// default of 3 days ago</span><span class="WHIT">
<span class='line'>576</span> </span><span class="WHIT">            </span><span class="NAME">start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>577</span> </span><span class="WHIT">            </span><span class="NAME">start.setDate</span><span class="PUNC">(</span><span class="NAME">start.getDate</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NUMB">3</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>578</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>579</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>580</span> 
<span class='line'>581</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">end</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>582</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">range.max</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>583</span> </span><span class="WHIT">            </span><span class="COMM">// end of the data</span><span class="WHIT">
<span class='line'>584</span> </span><span class="WHIT">            </span><span class="NAME">end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">range.max</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>585</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>586</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>587</span> </span><span class="WHIT">            </span><span class="COMM">// 7 days after start</span><span class="WHIT">
<span class='line'>588</span> </span><span class="WHIT">            </span><span class="NAME">end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>589</span> </span><span class="WHIT">            </span><span class="NAME">end.setDate</span><span class="PUNC">(</span><span class="NAME">end.getDate</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NUMB">7</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>590</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>591</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>592</span> 
<span class='line'>593</span> </span><span class="WHIT">    </span><span class="COMM">// prevent start Date &lt;= end Date</span><span class="WHIT">
<span class='line'>594</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">end</span><span class="WHIT"> </span><span class="PUNC">&lt;=</span><span class="WHIT"> </span><span class="NAME">start</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>595</span> </span><span class="WHIT">        </span><span class="NAME">end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>596</span> </span><span class="WHIT">        </span><span class="NAME">end.setDate</span><span class="PUNC">(</span><span class="NAME">end.getDate</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NUMB">7</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>597</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>598</span> 
<span class='line'>599</span> </span><span class="WHIT">    </span><span class="COMM">// limit to the allowed range (don't let this do by applyRange,</span><span class="WHIT">
<span class='line'>600</span> </span><span class="WHIT">    </span><span class="COMM">// because that method will try to maintain the interval (end-start)</span><span class="WHIT">
<span class='line'>601</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options.min</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">this.options.min</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// date</span><span class="WHIT">
<span class='line'>602</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">min.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>603</span> </span><span class="WHIT">        </span><span class="NAME">start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">min.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// date</span><span class="WHIT">
<span class='line'>604</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>605</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options.max</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">this.options.max</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// date</span><span class="WHIT">
<span class='line'>606</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">max.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>607</span> </span><span class="WHIT">        </span><span class="NAME">end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">max.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// date</span><span class="WHIT">
<span class='line'>608</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>609</span> 
<span class='line'>610</span> </span><span class="WHIT">    </span><span class="NAME">this.applyRange</span><span class="PUNC">(</span><span class="NAME">start</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>611</span> 
<span class='line'>612</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">redraw</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">redraw</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>613</span> </span><span class="WHIT">        </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>614</span> </span><span class="WHIT">            </span><span class="NAME">animate</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="WHIT">
<span class='line'>615</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="COMM">// TODO: optimize, no reflow needed</span><span class="WHIT">
<span class='line'>616</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>617</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>618</span> </span><span class="WHIT">        </span><span class="NAME">this.recalcConversion</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>619</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>620</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>621</span> 
<span class='line'>622</span> 
<span class='line'>623</span> </span><span class="COMM">/**
<span class='line'>624</span>  * Change the visible chart range such that all items become visible
<span class='line'>625</span>  */</span><span class="WHIT">
<span class='line'>626</span> </span><span class="NAME">links.Timeline.prototype.setVisibleChartRangeAuto</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>627</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">range</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getDataRange</span><span class="PUNC">(</span><span class="KEYW">true</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>628</span> </span><span class="WHIT">    </span><span class="NAME">this.setVisibleChartRange</span><span class="PUNC">(</span><span class="NAME">range.min</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">range.max</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>629</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>630</span> 
<span class='line'>631</span> </span><span class="COMM">/**
<span class='line'>632</span>  * Adjust the visible range such that the current time is located in the center
<span class='line'>633</span>  * of the timeline
<span class='line'>634</span>  */</span><span class="WHIT">
<span class='line'>635</span> </span><span class="NAME">links.Timeline.prototype.setVisibleChartRangeNow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>636</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">now</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>637</span> 
<span class='line'>638</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>639</span> 
<span class='line'>640</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">startNew</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">now.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>641</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">endNew</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">startNew.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>642</span> </span><span class="WHIT">    </span><span class="NAME">this.setVisibleChartRange</span><span class="PUNC">(</span><span class="NAME">startNew</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">endNew</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>643</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>644</span> 
<span class='line'>645</span> 
<span class='line'>646</span> </span><span class="COMM">/**
<span class='line'>647</span>  * Retrieve the current visible range in the timeline.
<span class='line'>648</span>  * @return {Object} An object with start and end properties
<span class='line'>649</span>  */</span><span class="WHIT">
<span class='line'>650</span> </span><span class="NAME">links.Timeline.prototype.getVisibleChartRange</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>651</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>652</span> </span><span class="WHIT">        </span><span class="STRN">'start'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>653</span> </span><span class="WHIT">        </span><span class="STRN">'end'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>654</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>655</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>656</span> 
<span class='line'>657</span> </span><span class="COMM">/**
<span class='line'>658</span>  * Get the date range of the items.
<span class='line'>659</span>  * @param {boolean} [withMargin]  If true, 5% of whitespace is added to the
<span class='line'>660</span>  *                                left and right of the range. Default is false.
<span class='line'>661</span>  * @return {Object} range    An object with parameters min and max.
<span class='line'>662</span>  *                           - {Date} min is the lowest start date of the items
<span class='line'>663</span>  *                           - {Date} max is the highest start or end date of the items
<span class='line'>664</span>  *                           If no data is available, the values of min and max
<span class='line'>665</span>  *                           will be undefined
<span class='line'>666</span>  */</span><span class="WHIT">
<span class='line'>667</span> </span><span class="NAME">links.Timeline.prototype.getDataRange</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">withMargin</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>668</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">items</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.items</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>669</span> </span><span class="WHIT">        </span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="COMM">// number</span><span class="WHIT">
<span class='line'>670</span> </span><span class="WHIT">        </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// number</span><span class="WHIT">
<span class='line'>671</span> 
<span class='line'>672</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">items</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>673</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">items.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>674</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">items</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>675</span> </span><span class="WHIT">                </span><span class="NAME">start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.start</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">item.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>676</span> </span><span class="WHIT">                </span><span class="NAME">end</span><span class="WHIT">   </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.end</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="WHIT">   </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">item.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">start</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>677</span> 
<span class='line'>678</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">start</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>679</span> </span><span class="WHIT">                </span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.min</span><span class="PUNC">(</span><span class="NAME">min.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>680</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>681</span> </span><span class="WHIT">            </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>682</span> </span><span class="WHIT">                </span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">start</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>683</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>684</span> 
<span class='line'>685</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">end</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>686</span> </span><span class="WHIT">                </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.max</span><span class="PUNC">(</span><span class="NAME">max</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>687</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>688</span> </span><span class="WHIT">            </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>689</span> </span><span class="WHIT">                </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>690</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>691</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>692</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>693</span> 
<span class='line'>694</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">withMargin</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>695</span> </span><span class="WHIT">        </span><span class="COMM">// zoom out 5% such that you have a little white space on the left and right</span><span class="WHIT">
<span class='line'>696</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">min</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>697</span> </span><span class="WHIT">        </span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">0.05</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>698</span> </span><span class="WHIT">        </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">0.05</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>699</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>700</span> 
<span class='line'>701</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>702</span> </span><span class="WHIT">        </span><span class="STRN">'min'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">min</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>703</span> </span><span class="WHIT">        </span><span class="STRN">'max'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">max</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="WHIT">
<span class='line'>704</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>705</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>706</span> 
<span class='line'>707</span> </span><span class="COMM">/**
<span class='line'>708</span>  * Re-render (reflow and repaint) all components of the Timeline: frame, axis,
<span class='line'>709</span>  * items, ...
<span class='line'>710</span>  * @param {Object} [options]  Available options:
<span class='line'>711</span>  *                            {boolean} renderTimesLeft   Number of times the
<span class='line'>712</span>  *                                                        render may be repeated
<span class='line'>713</span>  *                                                        5 times by default.
<span class='line'>714</span>  *                            {boolean} animate           takes options.animate
<span class='line'>715</span>  *                                                        as default value
<span class='line'>716</span>  */</span><span class="WHIT">
<span class='line'>717</span> </span><span class="NAME">links.Timeline.prototype.render</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">options</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>718</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">frameResized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.reflowFrame</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>719</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">axisResized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.reflowAxis</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>720</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">groupsResized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.reflowGroups</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>721</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">itemsResized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.reflowItems</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>722</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">frameResized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">axisResized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">groupsResized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">itemsResized</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>723</span> 
<span class='line'>724</span> </span><span class="WHIT">    </span><span class="COMM">// TODO: only stackEvents/filterItems when resized or changed. (gives a bootstrap issue).</span><span class="WHIT">
<span class='line'>725</span> </span><span class="WHIT">    </span><span class="COMM">// if (resized) {</span><span class="WHIT">
<span class='line'>726</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">animate</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options.animate</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>727</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">options.animate</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>728</span> </span><span class="WHIT">        </span><span class="NAME">animate</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.animate</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>729</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>730</span> 
<span class='line'>731</span> </span><span class="WHIT">    </span><span class="NAME">this.recalcConversion</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>732</span> </span><span class="WHIT">    </span><span class="NAME">this.clusterItems</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>733</span> </span><span class="WHIT">    </span><span class="NAME">this.filterItems</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>734</span> </span><span class="WHIT">    </span><span class="NAME">this.stackItems</span><span class="PUNC">(</span><span class="NAME">animate</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>735</span> 
<span class='line'>736</span> </span><span class="WHIT">    </span><span class="NAME">this.recalcItems</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>737</span> 
<span class='line'>738</span> </span><span class="WHIT">    </span><span class="COMM">// TODO: only repaint when resized or when filterItems or stackItems gave a change?</span><span class="WHIT">
<span class='line'>739</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">needsReflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.repaint</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>740</span> 
<span class='line'>741</span> </span><span class="WHIT">    </span><span class="COMM">// re-render once when needed (prevent endless re-render loop)</span><span class="WHIT">
<span class='line'>742</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">needsReflow</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>743</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">renderTimesLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">options.renderTimesLeft</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>744</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">renderTimesLeft</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>745</span> </span><span class="WHIT">            </span><span class="NAME">renderTimesLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">5</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>746</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>747</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">renderTimesLeft</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>748</span> </span><span class="WHIT">            </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>749</span> </span><span class="WHIT">                </span><span class="STRN">'animate'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">options.animate</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>750</span> </span><span class="WHIT">                </span><span class="STRN">'renderTimesLeft'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">renderTimesLeft</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>751</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>752</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>753</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>754</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>755</span> 
<span class='line'>756</span> </span><span class="COMM">/**
<span class='line'>757</span>  * Repaint all components of the Timeline
<span class='line'>758</span>  * @return {boolean} needsReflow   Returns true if the DOM is changed such that
<span class='line'>759</span>  *                                 a reflow is needed.
<span class='line'>760</span>  */</span><span class="WHIT">
<span class='line'>761</span> </span><span class="NAME">links.Timeline.prototype.repaint</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>762</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">frameNeedsReflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.repaintFrame</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>763</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">axisNeedsReflow</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.repaintAxis</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>764</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">groupsNeedsReflow</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.repaintGroups</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>765</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">itemsNeedsReflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.repaintItems</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>766</span> </span><span class="WHIT">    </span><span class="NAME">this.repaintCurrentTime</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>767</span> </span><span class="WHIT">    </span><span class="NAME">this.repaintCustomTime</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>768</span> 
<span class='line'>769</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">frameNeedsReflow</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">axisNeedsReflow</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">groupsNeedsReflow</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">itemsNeedsReflow</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>770</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>771</span> 
<span class='line'>772</span> </span><span class="COMM">/**
<span class='line'>773</span>  * Reflow the timeline frame
<span class='line'>774</span>  * @return {boolean} resized    Returns true if any of the frame elements
<span class='line'>775</span>  *                              have been resized.
<span class='line'>776</span>  */</span><span class="WHIT">
<span class='line'>777</span> </span><span class="NAME">links.Timeline.prototype.reflowFrame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>778</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>779</span> </span><span class="WHIT">        </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>780</span> </span><span class="WHIT">        </span><span class="NAME">size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>781</span> </span><span class="WHIT">        </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>782</span> 
<span class='line'>783</span> </span><span class="WHIT">    </span><span class="COMM">// Note: IE7 has issues with giving frame.clientWidth, therefore I use offsetWidth instead</span><span class="WHIT">
<span class='line'>784</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">frameWidth</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.frame</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">dom.frame.offsetWidth</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>785</span> </span><span class="WHIT">        </span><span class="NAME">frameHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.frame</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">dom.frame.clientHeight</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>786</span> 
<span class='line'>787</span> </span><span class="WHIT">    </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">size.frameWidth</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">frameWidth</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>788</span> </span><span class="WHIT">    </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">size.frameHeight</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">frameHeight</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>789</span> </span><span class="WHIT">    </span><span class="NAME">size.frameWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">frameWidth</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>790</span> </span><span class="WHIT">    </span><span class="NAME">size.frameHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">frameHeight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>791</span> 
<span class='line'>792</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>793</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>794</span> 
<span class='line'>795</span> </span><span class="COMM">/**
<span class='line'>796</span>  * repaint the Timeline frame
<span class='line'>797</span>  * @return {boolean} needsReflow   Returns true if the DOM is changed such that
<span class='line'>798</span>  *                                 a reflow is needed.
<span class='line'>799</span>  */</span><span class="WHIT">
<span class='line'>800</span> </span><span class="NAME">links.Timeline.prototype.repaintFrame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>801</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">needsReflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>802</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>803</span> </span><span class="WHIT">        </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>804</span> </span><span class="WHIT">        </span><span class="NAME">size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>805</span> 
<span class='line'>806</span> </span><span class="WHIT">    </span><span class="COMM">// main frame</span><span class="WHIT">
<span class='line'>807</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">dom.frame</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>808</span> </span><span class="WHIT">        </span><span class="NAME">dom.frame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>809</span> </span><span class="WHIT">        </span><span class="NAME">dom.frame.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-frame"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>810</span> </span><span class="WHIT">        </span><span class="NAME">dom.frame.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"relative"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>811</span> </span><span class="WHIT">        </span><span class="NAME">dom.frame.style.overflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"hidden"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>812</span> </span><span class="WHIT">        </span><span class="NAME">dom.container.appendChild</span><span class="PUNC">(</span><span class="NAME">dom.frame</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>813</span> </span><span class="WHIT">        </span><span class="NAME">needsReflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>814</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>815</span> 
<span class='line'>816</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.autoHeight</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT">
<span class='line'>817</span> </span><span class="WHIT">        </span><span class="PUNC">(</span><span class="NAME">size.actualHeight</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>818</span> </span><span class="WHIT">        </span><span class="PUNC">(</span><span class="NAME">options.height</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="STRN">"100%"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>819</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">width</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.width</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="STRN">"100%"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>820</span> </span><span class="WHIT">    </span><span class="NAME">needsReflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">needsReflow</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.frame.style.height</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>821</span> </span><span class="WHIT">    </span><span class="NAME">needsReflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">needsReflow</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.frame.style.width</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>822</span> </span><span class="WHIT">    </span><span class="NAME">dom.frame.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>823</span> </span><span class="WHIT">    </span><span class="NAME">dom.frame.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>824</span> 
<span class='line'>825</span> </span><span class="WHIT">    </span><span class="COMM">// contents</span><span class="WHIT">
<span class='line'>826</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">dom.content</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>827</span> </span><span class="WHIT">        </span><span class="COMM">// create content box where the axis and items will be created</span><span class="WHIT">
<span class='line'>828</span> </span><span class="WHIT">        </span><span class="NAME">dom.content</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>829</span> </span><span class="WHIT">        </span><span class="NAME">dom.content.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"relative"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>830</span> </span><span class="WHIT">        </span><span class="NAME">dom.content.style.overflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"hidden"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>831</span> </span><span class="WHIT">        </span><span class="NAME">dom.frame.appendChild</span><span class="PUNC">(</span><span class="NAME">dom.content</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>832</span> 
<span class='line'>833</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">timelines</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>834</span> </span><span class="WHIT">        </span><span class="NAME">timelines.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>835</span> </span><span class="WHIT">        </span><span class="NAME">timelines.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>836</span> </span><span class="WHIT">        </span><span class="NAME">timelines.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>837</span> </span><span class="WHIT">        </span><span class="NAME">timelines.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"100%"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>838</span> </span><span class="WHIT">        </span><span class="NAME">timelines.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>839</span> </span><span class="WHIT">        </span><span class="NAME">dom.content.appendChild</span><span class="PUNC">(</span><span class="NAME">timelines</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>840</span> </span><span class="WHIT">        </span><span class="NAME">dom.contentTimelines</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">timelines</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>841</span> 
<span class='line'>842</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">params</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.eventParams</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>843</span> </span><span class="WHIT">            </span><span class="NAME">me</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>844</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">params.onMouseDown</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>845</span> </span><span class="WHIT">            </span><span class="NAME">params.onMouseDown</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="NAME">me.onMouseDown</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>846</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addEventListener</span><span class="PUNC">(</span><span class="NAME">dom.content</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"mousedown"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">params.onMouseDown</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>847</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>848</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">params.onTouchStart</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>849</span> </span><span class="WHIT">            </span><span class="NAME">params.onTouchStart</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="NAME">me.onTouchStart</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>850</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addEventListener</span><span class="PUNC">(</span><span class="NAME">dom.content</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"touchstart"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">params.onTouchStart</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>851</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>852</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">params.onMouseWheel</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>853</span> </span><span class="WHIT">            </span><span class="NAME">params.onMouseWheel</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="NAME">me.onMouseWheel</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>854</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addEventListener</span><span class="PUNC">(</span><span class="NAME">dom.content</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"mousewheel"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">params.onMouseWheel</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>855</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>856</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">params.onDblClick</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>857</span> </span><span class="WHIT">            </span><span class="NAME">params.onDblClick</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="NAME">me.onDblClick</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>858</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addEventListener</span><span class="PUNC">(</span><span class="NAME">dom.content</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"dblclick"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">params.onDblClick</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>859</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>860</span> 
<span class='line'>861</span> </span><span class="WHIT">        </span><span class="NAME">needsReflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>862</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>863</span> </span><span class="WHIT">    </span><span class="NAME">dom.content.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.contentLeft</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>864</span> </span><span class="WHIT">    </span><span class="NAME">dom.content.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>865</span> </span><span class="WHIT">    </span><span class="NAME">dom.content.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.contentWidth</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>866</span> </span><span class="WHIT">    </span><span class="NAME">dom.content.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.frameHeight</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>867</span> 
<span class='line'>868</span> </span><span class="WHIT">    </span><span class="NAME">this.repaintNavigation</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>869</span> 
<span class='line'>870</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">needsReflow</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>871</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>872</span> 
<span class='line'>873</span> </span><span class="COMM">/**
<span class='line'>874</span>  * Reflow the timeline axis. Calculate its height, width, positioning, etc...
<span class='line'>875</span>  * @return {boolean} resized    returns true if the axis is resized
<span class='line'>876</span>  */</span><span class="WHIT">
<span class='line'>877</span> </span><span class="NAME">links.Timeline.prototype.reflowAxis</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>878</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>879</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>880</span> </span><span class="WHIT">        </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>881</span> </span><span class="WHIT">        </span><span class="NAME">size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>882</span> </span><span class="WHIT">        </span><span class="NAME">axisDom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.axis</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>883</span> 
<span class='line'>884</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">characterMinorWidth</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">axisDom</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">axisDom.characterMinor</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">axisDom.characterMinor.clientWidth</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>885</span> </span><span class="WHIT">        </span><span class="NAME">characterMinorHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">axisDom</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">axisDom.characterMinor</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">axisDom.characterMinor.clientHeight</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>886</span> </span><span class="WHIT">        </span><span class="NAME">characterMajorWidth</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">axisDom</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">axisDom.characterMajor</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">axisDom.characterMajor.clientWidth</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>887</span> </span><span class="WHIT">        </span><span class="NAME">characterMajorHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">axisDom</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">axisDom.characterMajor</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">axisDom.characterMajor.clientHeight</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>888</span> </span><span class="WHIT">        </span><span class="NAME">axisHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.showMinorLabels</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">characterMinorHeight</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
<span class='line'>889</span> </span><span class="WHIT">            </span><span class="PUNC">(</span><span class="NAME">options.showMajorLabels</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">characterMajorHeight</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>890</span> 
<span class='line'>891</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">axisTop</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.axisOnTop</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">size.frameHeight</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">axisHeight</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>892</span> </span><span class="WHIT">        </span><span class="NAME">axisLine</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.axisOnTop</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">axisHeight</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">axisTop</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>893</span> 
<span class='line'>894</span> </span><span class="WHIT">    </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">size.axis.top</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">axisTop</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>895</span> </span><span class="WHIT">    </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">size.axis.line</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">axisLine</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>896</span> </span><span class="WHIT">    </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">size.axis.height</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">axisHeight</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>897</span> </span><span class="WHIT">    </span><span class="NAME">size.axis.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">axisTop</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>898</span> </span><span class="WHIT">    </span><span class="NAME">size.axis.line</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">axisLine</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>899</span> </span><span class="WHIT">    </span><span class="NAME">size.axis.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">axisHeight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>900</span> </span><span class="WHIT">    </span><span class="NAME">size.axis.labelMajorTop</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.axisOnTop</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">axisLine</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
<span class='line'>901</span> </span><span class="WHIT">        </span><span class="PUNC">(</span><span class="NAME">options.showMinorLabels</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">characterMinorHeight</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>902</span> </span><span class="WHIT">    </span><span class="NAME">size.axis.labelMinorTop</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.axisOnTop</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT">
<span class='line'>903</span> </span><span class="WHIT">        </span><span class="PUNC">(</span><span class="NAME">options.showMajorLabels</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">characterMajorHeight</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>904</span> </span><span class="WHIT">        </span><span class="NAME">axisLine</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>905</span> </span><span class="WHIT">    </span><span class="NAME">size.axis.lineMinorTop</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.axisOnTop</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">size.axis.labelMinorTop</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>906</span> </span><span class="WHIT">    </span><span class="NAME">size.axis.lineMinorHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.showMajorLabels</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT">
<span class='line'>907</span> </span><span class="WHIT">        </span><span class="NAME">size.frameHeight</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">characterMajorHeight</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>908</span> </span><span class="WHIT">        </span><span class="NAME">size.frameHeight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>909</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">axisDom</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">axisDom.minorLines</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">axisDom.minorLines.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>910</span> </span><span class="WHIT">        </span><span class="NAME">size.axis.lineMinorWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">axisDom.minorLines</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">offsetWidth</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>911</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>912</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>913</span> </span><span class="WHIT">        </span><span class="NAME">size.axis.lineMinorWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>914</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>915</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">axisDom</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">axisDom.majorLines</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">axisDom.majorLines.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>916</span> </span><span class="WHIT">        </span><span class="NAME">size.axis.lineMajorWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">axisDom.majorLines</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">offsetWidth</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>917</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>918</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>919</span> </span><span class="WHIT">        </span><span class="NAME">size.axis.lineMajorWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>920</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>921</span> 
<span class='line'>922</span> </span><span class="WHIT">    </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">size.axis.characterMinorWidth</span><span class="WHIT">  </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">characterMinorWidth</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>923</span> </span><span class="WHIT">    </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">size.axis.characterMinorHeight</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">characterMinorHeight</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>924</span> </span><span class="WHIT">    </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">size.axis.characterMajorWidth</span><span class="WHIT">  </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">characterMajorWidth</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>925</span> </span><span class="WHIT">    </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">size.axis.characterMajorHeight</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">characterMajorHeight</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>926</span> </span><span class="WHIT">    </span><span class="NAME">size.axis.characterMinorWidth</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">characterMinorWidth</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>927</span> </span><span class="WHIT">    </span><span class="NAME">size.axis.characterMinorHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">characterMinorHeight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>928</span> </span><span class="WHIT">    </span><span class="NAME">size.axis.characterMajorWidth</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">characterMajorWidth</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>929</span> </span><span class="WHIT">    </span><span class="NAME">size.axis.characterMajorHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">characterMajorHeight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>930</span> 
<span class='line'>931</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">contentHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.max</span><span class="PUNC">(</span><span class="NAME">size.frameHeight</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">axisHeight</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>932</span> </span><span class="WHIT">    </span><span class="NAME">size.contentLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.groupsOnRight</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">size.groupsWidth</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>933</span> </span><span class="WHIT">    </span><span class="NAME">size.contentWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.max</span><span class="PUNC">(</span><span class="NAME">size.frameWidth</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">size.groupsWidth</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>934</span> </span><span class="WHIT">    </span><span class="NAME">size.contentHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">contentHeight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>935</span> 
<span class='line'>936</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>937</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>938</span> 
<span class='line'>939</span> </span><span class="COMM">/**
<span class='line'>940</span>  * Redraw the timeline axis with minor and major labels
<span class='line'>941</span>  * @return {boolean} needsReflow     Returns true if the DOM is changed such
<span class='line'>942</span>  *                                   that a reflow is needed.
<span class='line'>943</span>  */</span><span class="WHIT">
<span class='line'>944</span> </span><span class="NAME">links.Timeline.prototype.repaintAxis</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>945</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">needsReflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>946</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>947</span> </span><span class="WHIT">        </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>948</span> </span><span class="WHIT">        </span><span class="NAME">size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>949</span> </span><span class="WHIT">        </span><span class="NAME">step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>950</span> 
<span class='line'>951</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">axis</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.axis</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>952</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">axis</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>953</span> </span><span class="WHIT">        </span><span class="NAME">axis</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>954</span> </span><span class="WHIT">        </span><span class="NAME">dom.axis</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">axis</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>955</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>956</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">size.axis.properties</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>957</span> </span><span class="WHIT">        </span><span class="NAME">size.axis.properties</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>958</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>959</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">axis.minorTexts</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>960</span> </span><span class="WHIT">        </span><span class="NAME">axis.minorTexts</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>961</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>962</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">axis.minorLines</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>963</span> </span><span class="WHIT">        </span><span class="NAME">axis.minorLines</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>964</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>965</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">axis.majorTexts</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>966</span> </span><span class="WHIT">        </span><span class="NAME">axis.majorTexts</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>967</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>968</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">axis.majorLines</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>969</span> </span><span class="WHIT">        </span><span class="NAME">axis.majorLines</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>970</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>971</span> 
<span class='line'>972</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">axis.frame</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>973</span> </span><span class="WHIT">        </span><span class="NAME">axis.frame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>974</span> </span><span class="WHIT">        </span><span class="NAME">axis.frame.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>975</span> </span><span class="WHIT">        </span><span class="NAME">axis.frame.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>976</span> </span><span class="WHIT">        </span><span class="NAME">axis.frame.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>977</span> </span><span class="WHIT">        </span><span class="NAME">dom.content.appendChild</span><span class="PUNC">(</span><span class="NAME">axis.frame</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>978</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>979</span> 
<span class='line'>980</span> </span><span class="WHIT">    </span><span class="COMM">// take axis offline</span><span class="WHIT">
<span class='line'>981</span> </span><span class="WHIT">    </span><span class="NAME">dom.content.removeChild</span><span class="PUNC">(</span><span class="NAME">axis.frame</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>982</span> 
<span class='line'>983</span> </span><span class="WHIT">    </span><span class="NAME">axis.frame.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">size.contentWidth</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>984</span> </span><span class="WHIT">    </span><span class="NAME">axis.frame.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">size.axis.height</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>985</span> 
<span class='line'>986</span> </span><span class="WHIT">    </span><span class="COMM">// the drawn axis is more wide than the actual visual part, such that</span><span class="WHIT">
<span class='line'>987</span> </span><span class="WHIT">    </span><span class="COMM">// the axis can be dragged without having to redraw it each time again.</span><span class="WHIT">
<span class='line'>988</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.screenToTime</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>989</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.screenToTime</span><span class="PUNC">(</span><span class="NAME">size.contentWidth</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>990</span> 
<span class='line'>991</span> </span><span class="WHIT">    </span><span class="COMM">// calculate minimum step (in milliseconds) based on character size</span><span class="WHIT">
<span class='line'>992</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">size.axis.characterMinorWidth</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>993</span> </span><span class="WHIT">        </span><span class="NAME">this.minimumStep</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.screenToTime</span><span class="PUNC">(</span><span class="NAME">size.axis.characterMinorWidth</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">6</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT">
<span class='line'>994</span> </span><span class="WHIT">            </span><span class="NAME">this.screenToTime</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>995</span> 
<span class='line'>996</span> </span><span class="WHIT">        </span><span class="NAME">step.setRange</span><span class="PUNC">(</span><span class="NAME">start</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">this.minimumStep</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>997</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>998</span> 
<span class='line'>999</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">charsNeedsReflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.repaintAxisCharacters</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1000</span> </span><span class="WHIT">    </span><span class="NAME">needsReflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">needsReflow</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">charsNeedsReflow</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1001</span> 
<span class='line'>1002</span> </span><span class="WHIT">    </span><span class="COMM">// The current labels on the axis will be re-used (much better performance),</span><span class="WHIT">
<span class='line'>1003</span> </span><span class="WHIT">    </span><span class="COMM">// therefore, the repaintAxis method uses the mechanism with</span><span class="WHIT">
<span class='line'>1004</span> </span><span class="WHIT">    </span><span class="COMM">// repaintAxisStartOverwriting, repaintAxisEndOverwriting, and</span><span class="WHIT">
<span class='line'>1005</span> </span><span class="WHIT">    </span><span class="COMM">// this.size.axis.properties is used.</span><span class="WHIT">
<span class='line'>1006</span> </span><span class="WHIT">    </span><span class="NAME">this.repaintAxisStartOverwriting</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1007</span> 
<span class='line'>1008</span> </span><span class="WHIT">    </span><span class="NAME">step.start</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1009</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">xFirstMajorLabel</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1010</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1011</span> </span><span class="WHIT">    </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">step.end</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NUMB">1000</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1012</span> </span><span class="WHIT">        </span><span class="NAME">max</span><span class="PUNC">++</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1013</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">cur</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">step.getCurrent</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1014</span> </span><span class="WHIT">            </span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.timeToScreen</span><span class="PUNC">(</span><span class="NAME">cur</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1015</span> </span><span class="WHIT">            </span><span class="NAME">isMajor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">step.isMajor</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1016</span> 
<span class='line'>1017</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.showMinorLabels</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1018</span> </span><span class="WHIT">            </span><span class="NAME">this.repaintAxisMinorText</span><span class="PUNC">(</span><span class="NAME">x</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">step.getLabelMinor</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1019</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1020</span> 
<span class='line'>1021</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">isMajor</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">options.showMajorLabels</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1022</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1023</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">xFirstMajorLabel</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1024</span> </span><span class="WHIT">                    </span><span class="NAME">xFirstMajorLabel</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">x</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1025</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1026</span> </span><span class="WHIT">                </span><span class="NAME">this.repaintAxisMajorText</span><span class="PUNC">(</span><span class="NAME">x</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">step.getLabelMajor</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1027</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1028</span> </span><span class="WHIT">            </span><span class="NAME">this.repaintAxisMajorLine</span><span class="PUNC">(</span><span class="NAME">x</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1029</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1030</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1031</span> </span><span class="WHIT">            </span><span class="NAME">this.repaintAxisMinorLine</span><span class="PUNC">(</span><span class="NAME">x</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1032</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1033</span> 
<span class='line'>1034</span> </span><span class="WHIT">        </span><span class="NAME">step.next</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1035</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1036</span> 
<span class='line'>1037</span> </span><span class="WHIT">    </span><span class="COMM">// create a major label on the left when needed</span><span class="WHIT">
<span class='line'>1038</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.showMajorLabels</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1039</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">leftTime</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.screenToTime</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1040</span> </span><span class="WHIT">            </span><span class="NAME">leftText</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.step.getLabelMajor</span><span class="PUNC">(</span><span class="NAME">leftTime</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1041</span> </span><span class="WHIT">            </span><span class="NAME">width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">leftText.length</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">size.axis.characterMajorWidth</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// upper bound estimation</span><span class="WHIT">
<span class='line'>1042</span> 
<span class='line'>1043</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">xFirstMajorLabel</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">width</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">xFirstMajorLabel</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1044</span> </span><span class="WHIT">            </span><span class="NAME">this.repaintAxisMajorText</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">leftText</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">leftTime</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1045</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1046</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1047</span> 
<span class='line'>1048</span> </span><span class="WHIT">    </span><span class="COMM">// cleanup left over labels</span><span class="WHIT">
<span class='line'>1049</span> </span><span class="WHIT">    </span><span class="NAME">this.repaintAxisEndOverwriting</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1050</span> 
<span class='line'>1051</span> </span><span class="WHIT">    </span><span class="NAME">this.repaintAxisHorizontal</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1052</span> 
<span class='line'>1053</span> </span><span class="WHIT">    </span><span class="COMM">// put axis online</span><span class="WHIT">
<span class='line'>1054</span> </span><span class="WHIT">    </span><span class="NAME">dom.content.insertBefore</span><span class="PUNC">(</span><span class="NAME">axis.frame</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">dom.content.firstChild</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1055</span> 
<span class='line'>1056</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">needsReflow</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1057</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1058</span> 
<span class='line'>1059</span> </span><span class="COMM">/**
<span class='line'>1060</span>  * Create characters used to determine the size of text on the axis
<span class='line'>1061</span>  * @return {boolean} needsReflow   Returns true if the DOM is changed such that
<span class='line'>1062</span>  *                                 a reflow is needed.
<span class='line'>1063</span>  */</span><span class="WHIT">
<span class='line'>1064</span> </span><span class="NAME">links.Timeline.prototype.repaintAxisCharacters</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1065</span> </span><span class="WHIT">    </span><span class="COMM">// calculate the width and height of a single character</span><span class="WHIT">
<span class='line'>1066</span> </span><span class="WHIT">    </span><span class="COMM">// this is used to calculate the step size, and also the positioning of the</span><span class="WHIT">
<span class='line'>1067</span> </span><span class="WHIT">    </span><span class="COMM">// axis</span><span class="WHIT">
<span class='line'>1068</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">needsReflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1069</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1070</span> </span><span class="WHIT">        </span><span class="NAME">axis</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.axis</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1071</span> </span><span class="WHIT">        </span><span class="NAME">text</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1072</span> 
<span class='line'>1073</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">axis.characterMinor</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1074</span> </span><span class="WHIT">        </span><span class="NAME">text</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createTextNode</span><span class="PUNC">(</span><span class="STRN">"0"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1075</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">characterMinor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1076</span> </span><span class="WHIT">        </span><span class="NAME">characterMinor.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-axis-text timeline-axis-text-minor"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1077</span> </span><span class="WHIT">        </span><span class="NAME">characterMinor.appendChild</span><span class="PUNC">(</span><span class="NAME">text</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1078</span> </span><span class="WHIT">        </span><span class="NAME">characterMinor.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1079</span> </span><span class="WHIT">        </span><span class="NAME">characterMinor.style.visibility</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"hidden"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1080</span> </span><span class="WHIT">        </span><span class="NAME">characterMinor.style.paddingLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1081</span> </span><span class="WHIT">        </span><span class="NAME">characterMinor.style.paddingRight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1082</span> </span><span class="WHIT">        </span><span class="NAME">axis.frame.appendChild</span><span class="PUNC">(</span><span class="NAME">characterMinor</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1083</span> 
<span class='line'>1084</span> </span><span class="WHIT">        </span><span class="NAME">axis.characterMinor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">characterMinor</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1085</span> </span><span class="WHIT">        </span><span class="NAME">needsReflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1086</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1087</span> 
<span class='line'>1088</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">axis.characterMajor</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1089</span> </span><span class="WHIT">        </span><span class="NAME">text</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createTextNode</span><span class="PUNC">(</span><span class="STRN">"0"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1090</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">characterMajor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1091</span> </span><span class="WHIT">        </span><span class="NAME">characterMajor.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-axis-text timeline-axis-text-major"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1092</span> </span><span class="WHIT">        </span><span class="NAME">characterMajor.appendChild</span><span class="PUNC">(</span><span class="NAME">text</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1093</span> </span><span class="WHIT">        </span><span class="NAME">characterMajor.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1094</span> </span><span class="WHIT">        </span><span class="NAME">characterMajor.style.visibility</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"hidden"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1095</span> </span><span class="WHIT">        </span><span class="NAME">characterMajor.style.paddingLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1096</span> </span><span class="WHIT">        </span><span class="NAME">characterMajor.style.paddingRight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1097</span> </span><span class="WHIT">        </span><span class="NAME">axis.frame.appendChild</span><span class="PUNC">(</span><span class="NAME">characterMajor</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1098</span> 
<span class='line'>1099</span> </span><span class="WHIT">        </span><span class="NAME">axis.characterMajor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">characterMajor</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1100</span> </span><span class="WHIT">        </span><span class="NAME">needsReflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1101</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1102</span> 
<span class='line'>1103</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">needsReflow</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1104</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1105</span> 
<span class='line'>1106</span> </span><span class="COMM">/**
<span class='line'>1107</span>  * Initialize redraw of the axis. All existing labels and lines will be
<span class='line'>1108</span>  * overwritten and reused.
<span class='line'>1109</span>  */</span><span class="WHIT">
<span class='line'>1110</span> </span><span class="NAME">links.Timeline.prototype.repaintAxisStartOverwriting</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1111</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">properties</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size.axis.properties</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1112</span> 
<span class='line'>1113</span> </span><span class="WHIT">    </span><span class="NAME">properties.minorTextNum</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1114</span> </span><span class="WHIT">    </span><span class="NAME">properties.minorLineNum</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1115</span> </span><span class="WHIT">    </span><span class="NAME">properties.majorTextNum</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1116</span> </span><span class="WHIT">    </span><span class="NAME">properties.majorLineNum</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1117</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1118</span> 
<span class='line'>1119</span> </span><span class="COMM">/**
<span class='line'>1120</span>  * End of overwriting HTML DOM elements of the axis.
<span class='line'>1121</span>  * remaining elements will be removed
<span class='line'>1122</span>  */</span><span class="WHIT">
<span class='line'>1123</span> </span><span class="NAME">links.Timeline.prototype.repaintAxisEndOverwriting</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1124</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1125</span> </span><span class="WHIT">        </span><span class="NAME">props</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size.axis.properties</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1126</span> </span><span class="WHIT">        </span><span class="NAME">frame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom.axis.frame</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1127</span> </span><span class="WHIT">        </span><span class="NAME">num</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1128</span> 
<span class='line'>1129</span> </span><span class="WHIT">    </span><span class="COMM">// remove leftovers</span><span class="WHIT">
<span class='line'>1130</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">minorTexts</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.axis.minorTexts</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1131</span> </span><span class="WHIT">    </span><span class="NAME">num</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">props.minorTextNum</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1132</span> </span><span class="WHIT">    </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">minorTexts.length</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">num</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1133</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">minorText</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">minorTexts</span><span class="PUNC">[</span><span class="NAME">num</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1134</span> </span><span class="WHIT">        </span><span class="NAME">frame.removeChild</span><span class="PUNC">(</span><span class="NAME">minorText</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1135</span> </span><span class="WHIT">        </span><span class="NAME">minorTexts.splice</span><span class="PUNC">(</span><span class="NAME">num</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1136</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1137</span> 
<span class='line'>1138</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">minorLines</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.axis.minorLines</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1139</span> </span><span class="WHIT">    </span><span class="NAME">num</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">props.minorLineNum</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1140</span> </span><span class="WHIT">    </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">minorLines.length</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">num</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1141</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">minorLine</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">minorLines</span><span class="PUNC">[</span><span class="NAME">num</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1142</span> </span><span class="WHIT">        </span><span class="NAME">frame.removeChild</span><span class="PUNC">(</span><span class="NAME">minorLine</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1143</span> </span><span class="WHIT">        </span><span class="NAME">minorLines.splice</span><span class="PUNC">(</span><span class="NAME">num</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1144</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1145</span> 
<span class='line'>1146</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">majorTexts</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.axis.majorTexts</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1147</span> </span><span class="WHIT">    </span><span class="NAME">num</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">props.majorTextNum</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1148</span> </span><span class="WHIT">    </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">majorTexts.length</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">num</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1149</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">majorText</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">majorTexts</span><span class="PUNC">[</span><span class="NAME">num</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1150</span> </span><span class="WHIT">        </span><span class="NAME">frame.removeChild</span><span class="PUNC">(</span><span class="NAME">majorText</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1151</span> </span><span class="WHIT">        </span><span class="NAME">majorTexts.splice</span><span class="PUNC">(</span><span class="NAME">num</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1152</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1153</span> 
<span class='line'>1154</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">majorLines</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.axis.majorLines</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1155</span> </span><span class="WHIT">    </span><span class="NAME">num</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">props.majorLineNum</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1156</span> </span><span class="WHIT">    </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">majorLines.length</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">num</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1157</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">majorLine</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">majorLines</span><span class="PUNC">[</span><span class="NAME">num</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1158</span> </span><span class="WHIT">        </span><span class="NAME">frame.removeChild</span><span class="PUNC">(</span><span class="NAME">majorLine</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1159</span> </span><span class="WHIT">        </span><span class="NAME">majorLines.splice</span><span class="PUNC">(</span><span class="NAME">num</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1160</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1161</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1162</span> 
<span class='line'>1163</span> </span><span class="COMM">/**
<span class='line'>1164</span>  * Repaint the horizontal line and background of the axis
<span class='line'>1165</span>  */</span><span class="WHIT">
<span class='line'>1166</span> </span><span class="NAME">links.Timeline.prototype.repaintAxisHorizontal</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1167</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">axis</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom.axis</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1168</span> </span><span class="WHIT">        </span><span class="NAME">size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1169</span> </span><span class="WHIT">        </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1170</span> 
<span class='line'>1171</span> </span><span class="WHIT">    </span><span class="COMM">// line behind all axis elements (possibly having a background color)</span><span class="WHIT">
<span class='line'>1172</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">hasAxis</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.showMinorLabels</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">options.showMajorLabels</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1173</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">hasAxis</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1174</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">axis.backgroundLine</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1175</span> </span><span class="WHIT">            </span><span class="COMM">// create the axis line background (for a background color or so)</span><span class="WHIT">
<span class='line'>1176</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">backgroundLine</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1177</span> </span><span class="WHIT">            </span><span class="NAME">backgroundLine.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-axis"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1178</span> </span><span class="WHIT">            </span><span class="NAME">backgroundLine.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1179</span> </span><span class="WHIT">            </span><span class="NAME">backgroundLine.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1180</span> </span><span class="WHIT">            </span><span class="NAME">backgroundLine.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"100%"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1181</span> </span><span class="WHIT">            </span><span class="NAME">backgroundLine.style.border</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"none"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1182</span> </span><span class="WHIT">            </span><span class="NAME">axis.frame.insertBefore</span><span class="PUNC">(</span><span class="NAME">backgroundLine</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">axis.frame.firstChild</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1183</span> 
<span class='line'>1184</span> </span><span class="WHIT">            </span><span class="NAME">axis.backgroundLine</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">backgroundLine</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1185</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1186</span> 
<span class='line'>1187</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">axis.backgroundLine</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1188</span> </span><span class="WHIT">            </span><span class="NAME">axis.backgroundLine.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.axis.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1189</span> </span><span class="WHIT">            </span><span class="NAME">axis.backgroundLine.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.axis.height</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1190</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1191</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1192</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1193</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">axis.backgroundLine</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1194</span> </span><span class="WHIT">            </span><span class="NAME">axis.frame.removeChild</span><span class="PUNC">(</span><span class="NAME">axis.backgroundLine</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1195</span> </span><span class="WHIT">            </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">axis.backgroundLine</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1196</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1197</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1198</span> 
<span class='line'>1199</span> </span><span class="WHIT">    </span><span class="COMM">// line before all axis elements</span><span class="WHIT">
<span class='line'>1200</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">hasAxis</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1201</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">axis.line</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1202</span> </span><span class="WHIT">            </span><span class="COMM">// put this line at the end of all childs</span><span class="WHIT">
<span class='line'>1203</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">line</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">axis.frame.removeChild</span><span class="PUNC">(</span><span class="NAME">axis.line</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1204</span> </span><span class="WHIT">            </span><span class="NAME">axis.frame.appendChild</span><span class="PUNC">(</span><span class="NAME">line</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1205</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1206</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1207</span> </span><span class="WHIT">            </span><span class="COMM">// make the axis line</span><span class="WHIT">
<span class='line'>1208</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">line</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1209</span> </span><span class="WHIT">            </span><span class="NAME">line.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-axis"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1210</span> </span><span class="WHIT">            </span><span class="NAME">line.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1211</span> </span><span class="WHIT">            </span><span class="NAME">line.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1212</span> </span><span class="WHIT">            </span><span class="NAME">line.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"100%"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1213</span> </span><span class="WHIT">            </span><span class="NAME">line.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1214</span> </span><span class="WHIT">            </span><span class="NAME">axis.frame.appendChild</span><span class="PUNC">(</span><span class="NAME">line</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1215</span> 
<span class='line'>1216</span> </span><span class="WHIT">            </span><span class="NAME">axis.line</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">line</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1217</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1218</span> 
<span class='line'>1219</span> </span><span class="WHIT">        </span><span class="NAME">axis.line.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.axis.line</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1220</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1221</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1222</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">axis.line</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">axis.line.parentElement</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1223</span> </span><span class="WHIT">            </span><span class="NAME">axis.frame.removeChild</span><span class="PUNC">(</span><span class="NAME">axis.line</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1224</span> </span><span class="WHIT">            </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">axis.line</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1225</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1226</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1227</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1228</span> 
<span class='line'>1229</span> </span><span class="COMM">/**
<span class='line'>1230</span>  * Create a minor label for the axis at position x
<span class='line'>1231</span>  * @param {Number} x
<span class='line'>1232</span>  * @param {String} text
<span class='line'>1233</span>  */</span><span class="WHIT">
<span class='line'>1234</span> </span><span class="NAME">links.Timeline.prototype.repaintAxisMinorText</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">x</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">text</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1235</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1236</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1237</span> </span><span class="WHIT">        </span><span class="NAME">props</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.axis.properties</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1238</span> </span><span class="WHIT">        </span><span class="NAME">frame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.axis.frame</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1239</span> </span><span class="WHIT">        </span><span class="NAME">minorTexts</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.axis.minorTexts</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1240</span> </span><span class="WHIT">        </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">props.minorTextNum</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1241</span> </span><span class="WHIT">        </span><span class="NAME">label</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1242</span> 
<span class='line'>1243</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">minorTexts.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1244</span> </span><span class="WHIT">        </span><span class="NAME">label</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">minorTexts</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="WHIT">
<span class='line'>1245</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1246</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1247</span> </span><span class="WHIT">        </span><span class="COMM">// create new label</span><span class="WHIT">
<span class='line'>1248</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">content</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createTextNode</span><span class="PUNC">(</span><span class="STRN">""</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1249</span> </span><span class="WHIT">        </span><span class="NAME">label</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1250</span> </span><span class="WHIT">        </span><span class="NAME">label.appendChild</span><span class="PUNC">(</span><span class="NAME">content</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1251</span> </span><span class="WHIT">        </span><span class="NAME">label.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-axis-text timeline-axis-text-minor"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1252</span> </span><span class="WHIT">        </span><span class="NAME">label.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1253</span> 
<span class='line'>1254</span> </span><span class="WHIT">        </span><span class="NAME">frame.appendChild</span><span class="PUNC">(</span><span class="NAME">label</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1255</span> 
<span class='line'>1256</span> </span><span class="WHIT">        </span><span class="NAME">minorTexts.push</span><span class="PUNC">(</span><span class="NAME">label</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1257</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1258</span> 
<span class='line'>1259</span> </span><span class="WHIT">    </span><span class="NAME">label.childNodes</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">nodeValue</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">text</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1260</span> </span><span class="WHIT">    </span><span class="NAME">label.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1261</span> </span><span class="WHIT">    </span><span class="NAME">label.style.top</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.axis.labelMinorTop</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1262</span> </span><span class="WHIT">    </span><span class="COMM">//label.title = title;  // TODO: this is a heavy operation</span><span class="WHIT">
<span class='line'>1263</span> 
<span class='line'>1264</span> </span><span class="WHIT">    </span><span class="NAME">props.minorTextNum</span><span class="PUNC">++</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1265</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1266</span> 
<span class='line'>1267</span> </span><span class="COMM">/**
<span class='line'>1268</span>  * Create a minor line for the axis at position x
<span class='line'>1269</span>  * @param {Number} x
<span class='line'>1270</span>  */</span><span class="WHIT">
<span class='line'>1271</span> </span><span class="NAME">links.Timeline.prototype.repaintAxisMinorLine</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">x</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1272</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">axis</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size.axis</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1273</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1274</span> </span><span class="WHIT">        </span><span class="NAME">props</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">axis.properties</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1275</span> </span><span class="WHIT">        </span><span class="NAME">frame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.axis.frame</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1276</span> </span><span class="WHIT">        </span><span class="NAME">minorLines</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.axis.minorLines</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1277</span> </span><span class="WHIT">        </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">props.minorLineNum</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1278</span> </span><span class="WHIT">        </span><span class="NAME">line</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1279</span> 
<span class='line'>1280</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">minorLines.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1281</span> </span><span class="WHIT">        </span><span class="NAME">line</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">minorLines</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1282</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1283</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1284</span> </span><span class="WHIT">        </span><span class="COMM">// create vertical line</span><span class="WHIT">
<span class='line'>1285</span> </span><span class="WHIT">        </span><span class="NAME">line</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1286</span> </span><span class="WHIT">        </span><span class="NAME">line.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-axis-grid timeline-axis-grid-minor"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1287</span> </span><span class="WHIT">        </span><span class="NAME">line.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1288</span> </span><span class="WHIT">        </span><span class="NAME">line.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1289</span> 
<span class='line'>1290</span> </span><span class="WHIT">        </span><span class="NAME">frame.appendChild</span><span class="PUNC">(</span><span class="NAME">line</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1291</span> </span><span class="WHIT">        </span><span class="NAME">minorLines.push</span><span class="PUNC">(</span><span class="NAME">line</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1292</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1293</span> 
<span class='line'>1294</span> </span><span class="WHIT">    </span><span class="NAME">line.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">axis.lineMinorTop</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1295</span> </span><span class="WHIT">    </span><span class="NAME">line.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">axis.lineMinorHeight</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1296</span> </span><span class="WHIT">    </span><span class="NAME">line.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">axis.lineMinorWidth</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1297</span> 
<span class='line'>1298</span> </span><span class="WHIT">    </span><span class="NAME">props.minorLineNum</span><span class="PUNC">++</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1299</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1300</span> 
<span class='line'>1301</span> </span><span class="COMM">/**
<span class='line'>1302</span>  * Create a Major label for the axis at position x
<span class='line'>1303</span>  * @param {Number} x
<span class='line'>1304</span>  * @param {String} text
<span class='line'>1305</span>  */</span><span class="WHIT">
<span class='line'>1306</span> </span><span class="NAME">links.Timeline.prototype.repaintAxisMajorText</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">x</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">text</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1307</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1308</span> </span><span class="WHIT">        </span><span class="NAME">props</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.axis.properties</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1309</span> </span><span class="WHIT">        </span><span class="NAME">frame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom.axis.frame</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1310</span> </span><span class="WHIT">        </span><span class="NAME">majorTexts</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom.axis.majorTexts</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1311</span> </span><span class="WHIT">        </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">props.majorTextNum</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1312</span> </span><span class="WHIT">        </span><span class="NAME">label</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1313</span> 
<span class='line'>1314</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">majorTexts.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1315</span> </span><span class="WHIT">        </span><span class="NAME">label</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">majorTexts</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1316</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1317</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1318</span> </span><span class="WHIT">        </span><span class="COMM">// create label</span><span class="WHIT">
<span class='line'>1319</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">content</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createTextNode</span><span class="PUNC">(</span><span class="NAME">text</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1320</span> </span><span class="WHIT">        </span><span class="NAME">label</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1321</span> </span><span class="WHIT">        </span><span class="NAME">label.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-axis-text timeline-axis-text-major"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1322</span> </span><span class="WHIT">        </span><span class="NAME">label.appendChild</span><span class="PUNC">(</span><span class="NAME">content</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1323</span> </span><span class="WHIT">        </span><span class="NAME">label.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1324</span> </span><span class="WHIT">        </span><span class="NAME">label.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1325</span> 
<span class='line'>1326</span> </span><span class="WHIT">        </span><span class="NAME">frame.appendChild</span><span class="PUNC">(</span><span class="NAME">label</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1327</span> </span><span class="WHIT">        </span><span class="NAME">majorTexts.push</span><span class="PUNC">(</span><span class="NAME">label</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1328</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1329</span> 
<span class='line'>1330</span> </span><span class="WHIT">    </span><span class="NAME">label.childNodes</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">nodeValue</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">text</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1331</span> </span><span class="WHIT">    </span><span class="NAME">label.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.axis.labelMajorTop</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1332</span> </span><span class="WHIT">    </span><span class="NAME">label.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1333</span> </span><span class="WHIT">    </span><span class="COMM">//label.title = title; // TODO: this is a heavy operation</span><span class="WHIT">
<span class='line'>1334</span> 
<span class='line'>1335</span> </span><span class="WHIT">    </span><span class="NAME">props.majorTextNum</span><span class="WHIT"> </span><span class="PUNC">++</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1336</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1337</span> 
<span class='line'>1338</span> </span><span class="COMM">/**
<span class='line'>1339</span>  * Create a Major line for the axis at position x
<span class='line'>1340</span>  * @param {Number} x
<span class='line'>1341</span>  */</span><span class="WHIT">
<span class='line'>1342</span> </span><span class="NAME">links.Timeline.prototype.repaintAxisMajorLine</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">x</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1343</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1344</span> </span><span class="WHIT">        </span><span class="NAME">props</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.axis.properties</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1345</span> </span><span class="WHIT">        </span><span class="NAME">axis</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size.axis</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1346</span> </span><span class="WHIT">        </span><span class="NAME">frame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom.axis.frame</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1347</span> </span><span class="WHIT">        </span><span class="NAME">majorLines</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom.axis.majorLines</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1348</span> </span><span class="WHIT">        </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">props.majorLineNum</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1349</span> </span><span class="WHIT">        </span><span class="NAME">line</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1350</span> 
<span class='line'>1351</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">majorLines.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1352</span> </span><span class="WHIT">        </span><span class="NAME">line</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">majorLines</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1353</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1354</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1355</span> </span><span class="WHIT">        </span><span class="COMM">// create vertical line</span><span class="WHIT">
<span class='line'>1356</span> </span><span class="WHIT">        </span><span class="NAME">line</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1357</span> </span><span class="WHIT">        </span><span class="NAME">line.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-axis-grid timeline-axis-grid-major"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1358</span> </span><span class="WHIT">        </span><span class="NAME">line.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1359</span> </span><span class="WHIT">        </span><span class="NAME">line.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1360</span> </span><span class="WHIT">        </span><span class="NAME">line.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1361</span> 
<span class='line'>1362</span> </span><span class="WHIT">        </span><span class="NAME">frame.appendChild</span><span class="PUNC">(</span><span class="NAME">line</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1363</span> </span><span class="WHIT">        </span><span class="NAME">majorLines.push</span><span class="PUNC">(</span><span class="NAME">line</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1364</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1365</span> 
<span class='line'>1366</span> </span><span class="WHIT">    </span><span class="NAME">line.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">axis.lineMajorWidth</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1367</span> </span><span class="WHIT">    </span><span class="NAME">line.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.frameHeight</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1368</span> 
<span class='line'>1369</span> </span><span class="WHIT">    </span><span class="NAME">props.majorLineNum</span><span class="WHIT"> </span><span class="PUNC">++</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1370</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1371</span> 
<span class='line'>1372</span> </span><span class="COMM">/**
<span class='line'>1373</span>  * Reflow all items, retrieve their actual size
<span class='line'>1374</span>  * @return {boolean} resized    returns true if any of the items is resized
<span class='line'>1375</span>  */</span><span class="WHIT">
<span class='line'>1376</span> </span><span class="NAME">links.Timeline.prototype.reflowItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1377</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1378</span> </span><span class="WHIT">        </span><span class="NAME">i</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1379</span> </span><span class="WHIT">        </span><span class="NAME">iMax</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1380</span> </span><span class="WHIT">        </span><span class="NAME">group</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1381</span> </span><span class="WHIT">        </span><span class="NAME">groups</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.groups</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1382</span> </span><span class="WHIT">        </span><span class="NAME">renderedItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.renderedItems</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1383</span> 
<span class='line'>1384</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">groups</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT"> </span><span class="COMM">// TODO: need to check if labels exists?</span><span class="WHIT">
<span class='line'>1385</span> </span><span class="WHIT">        </span><span class="COMM">// loop through all groups to reset the items height</span><span class="WHIT">
<span class='line'>1386</span> </span><span class="WHIT">        </span><span class="NAME">groups.forEach</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">group</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1387</span> </span><span class="WHIT">            </span><span class="NAME">group.itemsHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1388</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1389</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1390</span> 
<span class='line'>1391</span> </span><span class="WHIT">    </span><span class="COMM">// loop through the width and height of all visible items</span><span class="WHIT">
<span class='line'>1392</span> </span><span class="WHIT">    </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">renderedItems.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1393</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">renderedItems</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1394</span> </span><span class="WHIT">            </span><span class="NAME">domItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1395</span> </span><span class="WHIT">        </span><span class="NAME">group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.group</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1396</span> 
<span class='line'>1397</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">domItem</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1398</span> </span><span class="WHIT">            </span><span class="COMM">// TODO: move updating width and height into item.reflow</span><span class="WHIT">
<span class='line'>1399</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">domItem</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">domItem.clientWidth</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1400</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">domItem</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">domItem.clientHeight</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1401</span> </span><span class="WHIT">            </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item.width</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1402</span> </span><span class="WHIT">            </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item.height</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1403</span> </span><span class="WHIT">            </span><span class="NAME">item.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1404</span> </span><span class="WHIT">            </span><span class="NAME">item.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1405</span> </span><span class="WHIT">            </span><span class="COMM">//item.borderWidth = (domItem.offsetWidth - domItem.clientWidth - 2) / 2; // TODO: borderWidth</span><span class="WHIT">
<span class='line'>1406</span> </span><span class="WHIT">            </span><span class="NAME">item.reflow</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1407</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1408</span> 
<span class='line'>1409</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">group</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1410</span> </span><span class="WHIT">            </span><span class="NAME">group.itemsHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">group.itemsHeight</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT">
<span class='line'>1411</span> </span><span class="WHIT">                </span><span class="NAME">Math.max</span><span class="PUNC">(</span><span class="NAME">group.itemsHeight</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">item.height</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>1412</span> </span><span class="WHIT">                </span><span class="NAME">item.height</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1413</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1414</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1415</span> 
<span class='line'>1416</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1417</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1418</span> 
<span class='line'>1419</span> </span><span class="COMM">/**
<span class='line'>1420</span>  * Recalculate item properties:
<span class='line'>1421</span>  * - the height of each group.
<span class='line'>1422</span>  * - the actualHeight, from the stacked items or the sum of the group heights
<span class='line'>1423</span>  * @return {boolean} resized    returns true if any of the items properties is
<span class='line'>1424</span>  *                              changed
<span class='line'>1425</span>  */</span><span class="WHIT">
<span class='line'>1426</span> </span><span class="NAME">links.Timeline.prototype.recalcItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1427</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1428</span> </span><span class="WHIT">        </span><span class="NAME">i</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1429</span> </span><span class="WHIT">        </span><span class="NAME">iMax</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1430</span> </span><span class="WHIT">        </span><span class="NAME">item</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1431</span> </span><span class="WHIT">        </span><span class="NAME">finalItem</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1432</span> </span><span class="WHIT">        </span><span class="NAME">finalItems</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1433</span> </span><span class="WHIT">        </span><span class="NAME">group</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1434</span> </span><span class="WHIT">        </span><span class="NAME">groups</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.groups</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1435</span> </span><span class="WHIT">        </span><span class="NAME">size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1436</span> </span><span class="WHIT">        </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1437</span> </span><span class="WHIT">        </span><span class="NAME">renderedItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.renderedItems</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1438</span> 
<span class='line'>1439</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">actualHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1440</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">groups.length</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1441</span> </span><span class="WHIT">        </span><span class="COMM">// calculate actual height of the timeline when there are no groups</span><span class="WHIT">
<span class='line'>1442</span> </span><span class="WHIT">        </span><span class="COMM">// but stacked items</span><span class="WHIT">
<span class='line'>1443</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.autoHeight</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">options.cluster</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1444</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1445</span> </span><span class="WHIT">                </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1446</span> 
<span class='line'>1447</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.stack</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">this.stack.finalItems</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1448</span> </span><span class="WHIT">                </span><span class="COMM">// adjust the offset of all finalItems when the actualHeight has been changed</span><span class="WHIT">
<span class='line'>1449</span> </span><span class="WHIT">                </span><span class="NAME">finalItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.stack.finalItems</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1450</span> </span><span class="WHIT">                </span><span class="NAME">finalItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItems</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1451</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">finalItem</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">finalItem.top</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1452</span> </span><span class="WHIT">                    </span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItem.top</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1453</span> </span><span class="WHIT">                    </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItem.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">finalItem.height</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1454</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1455</span> </span><span class="WHIT">                </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItems.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1456</span> </span><span class="WHIT">                    </span><span class="NAME">finalItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItems</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1457</span> </span><span class="WHIT">                    </span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.min</span><span class="PUNC">(</span><span class="NAME">min</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">finalItem.top</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1458</span> </span><span class="WHIT">                    </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.max</span><span class="PUNC">(</span><span class="NAME">max</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">finalItem.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">finalItem.height</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1459</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1460</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1461</span> </span><span class="WHIT">            </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1462</span> </span><span class="WHIT">                </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">renderedItems</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1463</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">item.top</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1464</span> </span><span class="WHIT">                    </span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.top</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1465</span> </span><span class="WHIT">                    </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">item.height</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1466</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1467</span> </span><span class="WHIT">                </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">renderedItems.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1468</span> </span><span class="WHIT">                    </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">renderedItems</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1469</span> </span><span class="WHIT">                    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item.top</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1470</span> </span><span class="WHIT">                        </span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.min</span><span class="PUNC">(</span><span class="NAME">min</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">item.top</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1471</span> </span><span class="WHIT">                        </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.max</span><span class="PUNC">(</span><span class="NAME">max</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">item.height</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1472</span> </span><span class="WHIT">                    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1473</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1474</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1475</span> 
<span class='line'>1476</span> </span><span class="WHIT">            </span><span class="NAME">actualHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">min</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">options.eventMarginAxis</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">size.axis.height</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1477</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">actualHeight</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">options.minHeight</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1478</span> </span><span class="WHIT">                </span><span class="NAME">actualHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.minHeight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1479</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1480</span> 
<span class='line'>1481</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">size.actualHeight</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">actualHeight</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">options.autoHeight</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">!</span><span class="NAME">options.axisOnTop</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1482</span> </span><span class="WHIT">                </span><span class="COMM">// adjust the offset of all items when the actualHeight has been changed</span><span class="WHIT">
<span class='line'>1483</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">actualHeight</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">size.actualHeight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1484</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.stack</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">this.stack.finalItems</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1485</span> </span><span class="WHIT">                    </span><span class="NAME">finalItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.stack.finalItems</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1486</span> </span><span class="WHIT">                    </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItems.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1487</span> </span><span class="WHIT">                        </span><span class="NAME">finalItems</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1488</span> </span><span class="WHIT">                        </span><span class="NAME">finalItems</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">item.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1489</span> </span><span class="WHIT">                    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1490</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1491</span> </span><span class="WHIT">                </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1492</span> </span><span class="WHIT">                    </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">renderedItems.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1493</span> </span><span class="WHIT">                        </span><span class="NAME">renderedItems</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1494</span> </span><span class="WHIT">                    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1495</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1496</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1497</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1498</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1499</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1500</span> </span><span class="WHIT">        </span><span class="COMM">// loop through all groups to get the height of each group, and the</span><span class="WHIT">
<span class='line'>1501</span> </span><span class="WHIT">        </span><span class="COMM">// total height</span><span class="WHIT">
<span class='line'>1502</span> </span><span class="WHIT">        </span><span class="NAME">actualHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.axis.height</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">options.eventMarginAxis</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1503</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1504</span> </span><span class="WHIT">            </span><span class="NAME">group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1505</span> 
<span class='line'>1506</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">groupHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.max</span><span class="PUNC">(</span><span class="NAME">group.labelHeight</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">group.itemsHeight</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1507</span> </span><span class="WHIT">            </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">groupHeight</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">group.height</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1508</span> </span><span class="WHIT">            </span><span class="NAME">group.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groupHeight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1509</span> 
<span class='line'>1510</span> </span><span class="WHIT">            </span><span class="NAME">actualHeight</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">options.eventMargin</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1511</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1512</span> 
<span class='line'>1513</span> </span><span class="WHIT">        </span><span class="COMM">// calculate top positions of the group labels and lines</span><span class="WHIT">
<span class='line'>1514</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">eventMargin</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.eventMargin</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1515</span> </span><span class="WHIT">            </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.axisOnTop</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT">
<span class='line'>1516</span> </span><span class="WHIT">                </span><span class="NAME">options.eventMarginAxis</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">eventMargin</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>1517</span> </span><span class="WHIT">                </span><span class="NAME">size.contentHeight</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">options.eventMarginAxis</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">eventMargin</span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1518</span> </span><span class="WHIT">            </span><span class="NAME">axisHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.axis.height</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1519</span> 
<span class='line'>1520</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1521</span> </span><span class="WHIT">            </span><span class="NAME">group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1522</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.axisOnTop</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1523</span> </span><span class="WHIT">                </span><span class="NAME">group.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">axisHeight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1524</span> </span><span class="WHIT">                </span><span class="NAME">group.labelTop</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">axisHeight</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">group.height</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">group.labelHeight</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1525</span> </span><span class="WHIT">                </span><span class="NAME">group.lineTop</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">axisHeight</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">group.height</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">eventMargin</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1526</span> </span><span class="WHIT">                </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">group.height</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">eventMargin</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1527</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1528</span> </span><span class="WHIT">            </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1529</span> </span><span class="WHIT">                </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">group.height</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">eventMargin</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1530</span> </span><span class="WHIT">                </span><span class="NAME">group.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">top</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1531</span> </span><span class="WHIT">                </span><span class="NAME">group.labelTop</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">group.height</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">group.labelHeight</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1532</span> </span><span class="WHIT">                </span><span class="NAME">group.lineTop</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">eventMargin</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1533</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1534</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1535</span> 
<span class='line'>1536</span> </span><span class="WHIT">        </span><span class="COMM">// calculate top position of the visible items</span><span class="WHIT">
<span class='line'>1537</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">renderedItems.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1538</span> </span><span class="WHIT">            </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">renderedItems</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1539</span> </span><span class="WHIT">            </span><span class="NAME">group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.group</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1540</span> 
<span class='line'>1541</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">group</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1542</span> </span><span class="WHIT">                </span><span class="NAME">item.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">group.top</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1543</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1544</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1545</span> 
<span class='line'>1546</span> </span><span class="WHIT">        </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1547</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1548</span> 
<span class='line'>1549</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">actualHeight</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">options.minHeight</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1550</span> </span><span class="WHIT">        </span><span class="NAME">actualHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.minHeight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1551</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1552</span> </span><span class="WHIT">    </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">actualHeight</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">size.actualHeight</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1553</span> </span><span class="WHIT">    </span><span class="NAME">size.actualHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">actualHeight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1554</span> 
<span class='line'>1555</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1556</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1557</span> 
<span class='line'>1558</span> </span><span class="COMM">/**
<span class='line'>1559</span>  * This method clears the (internal) array this.items in a safe way: neatly
<span class='line'>1560</span>  * cleaning up the DOM, and accompanying arrays this.renderedItems and
<span class='line'>1561</span>  * the created clusters.
<span class='line'>1562</span>  */</span><span class="WHIT">
<span class='line'>1563</span> </span><span class="NAME">links.Timeline.prototype.clearItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1564</span> </span><span class="WHIT">    </span><span class="COMM">// add all visible items to the list to be hidden</span><span class="WHIT">
<span class='line'>1565</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">hideItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.renderQueue.hide</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1566</span> </span><span class="WHIT">    </span><span class="NAME">this.renderedItems.forEach</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1567</span> </span><span class="WHIT">        </span><span class="NAME">hideItems.push</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1568</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1569</span> 
<span class='line'>1570</span> </span><span class="WHIT">    </span><span class="COMM">// clear the cluster generator</span><span class="WHIT">
<span class='line'>1571</span> </span><span class="WHIT">    </span><span class="NAME">this.clusterGenerator.clear</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1572</span> 
<span class='line'>1573</span> </span><span class="WHIT">    </span><span class="COMM">// actually clear the items</span><span class="WHIT">
<span class='line'>1574</span> </span><span class="WHIT">    </span><span class="NAME">this.items</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1575</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1576</span> 
<span class='line'>1577</span> </span><span class="COMM">/**
<span class='line'>1578</span>  * Repaint all items
<span class='line'>1579</span>  * @return {boolean} needsReflow   Returns true if the DOM is changed such that
<span class='line'>1580</span>  *                                 a reflow is needed.
<span class='line'>1581</span>  */</span><span class="WHIT">
<span class='line'>1582</span> </span><span class="NAME">links.Timeline.prototype.repaintItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1583</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">item</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">index</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1584</span> 
<span class='line'>1585</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">needsReflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1586</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1587</span> </span><span class="WHIT">        </span><span class="NAME">size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1588</span> </span><span class="WHIT">        </span><span class="NAME">timeline</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1589</span> </span><span class="WHIT">        </span><span class="NAME">renderedItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.renderedItems</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1590</span> 
<span class='line'>1591</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">dom.items</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1592</span> </span><span class="WHIT">        </span><span class="NAME">dom.items</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1593</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1594</span> 
<span class='line'>1595</span> </span><span class="WHIT">    </span><span class="COMM">// draw the frame containing the items</span><span class="WHIT">
<span class='line'>1596</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">frame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.items.frame</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1597</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">frame</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1598</span> </span><span class="WHIT">        </span><span class="NAME">frame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1599</span> </span><span class="WHIT">        </span><span class="NAME">frame.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"relative"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1600</span> </span><span class="WHIT">        </span><span class="NAME">dom.content.appendChild</span><span class="PUNC">(</span><span class="NAME">frame</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1601</span> </span><span class="WHIT">        </span><span class="NAME">dom.items.frame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">frame</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1602</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1603</span> 
<span class='line'>1604</span> </span><span class="WHIT">    </span><span class="NAME">frame.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1605</span> </span><span class="WHIT">    </span><span class="NAME">frame.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.items.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1606</span> </span><span class="WHIT">    </span><span class="NAME">frame.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1607</span> 
<span class='line'>1608</span> </span><span class="WHIT">    </span><span class="COMM">// Take frame offline (for faster manipulation of the DOM)</span><span class="WHIT">
<span class='line'>1609</span> </span><span class="WHIT">    </span><span class="NAME">dom.content.removeChild</span><span class="PUNC">(</span><span class="NAME">frame</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1610</span> 
<span class='line'>1611</span> </span><span class="WHIT">    </span><span class="COMM">// process the render queue with changes</span><span class="WHIT">
<span class='line'>1612</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">queue</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.renderQueue</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1613</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">newImageUrls</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1614</span> </span><span class="WHIT">    </span><span class="NAME">needsReflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">needsReflow</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT">
<span class='line'>1615</span> </span><span class="WHIT">        </span><span class="PUNC">(</span><span class="NAME">queue.show.length</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT">
<span class='line'>1616</span> </span><span class="WHIT">        </span><span class="PUNC">(</span><span class="NAME">queue.update.length</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT">
<span class='line'>1617</span> </span><span class="WHIT">        </span><span class="PUNC">(</span><span class="NAME">queue.hide.length</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">   </span><span class="COMM">// TODO: reflow needed on hide of items?</span><span class="WHIT">
<span class='line'>1618</span> 
<span class='line'>1619</span> </span><span class="WHIT">    </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">queue.show.shift</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1620</span> </span><span class="WHIT">        </span><span class="NAME">item.showDOM</span><span class="PUNC">(</span><span class="NAME">frame</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1621</span> </span><span class="WHIT">        </span><span class="NAME">item.getImageUrls</span><span class="PUNC">(</span><span class="NAME">newImageUrls</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1622</span> </span><span class="WHIT">        </span><span class="NAME">renderedItems.push</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1623</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1624</span> </span><span class="WHIT">    </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">queue.update.shift</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1625</span> </span><span class="WHIT">        </span><span class="NAME">item.updateDOM</span><span class="PUNC">(</span><span class="NAME">frame</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1626</span> </span><span class="WHIT">        </span><span class="NAME">item.getImageUrls</span><span class="PUNC">(</span><span class="NAME">newImageUrls</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1627</span> </span><span class="WHIT">        </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.renderedItems.indexOf</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1628</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1629</span> </span><span class="WHIT">            </span><span class="NAME">renderedItems.push</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1630</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1631</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1632</span> </span><span class="WHIT">    </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">queue.hide.shift</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1633</span> </span><span class="WHIT">        </span><span class="NAME">item.hideDOM</span><span class="PUNC">(</span><span class="NAME">frame</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1634</span> </span><span class="WHIT">        </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.renderedItems.indexOf</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1635</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1636</span> </span><span class="WHIT">            </span><span class="NAME">renderedItems.splice</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1637</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1638</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1639</span> 
<span class='line'>1640</span> </span><span class="WHIT">    </span><span class="COMM">// reposition all visible items</span><span class="WHIT">
<span class='line'>1641</span> </span><span class="WHIT">    </span><span class="NAME">renderedItems.forEach</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1642</span> </span><span class="WHIT">        </span><span class="NAME">item.updatePosition</span><span class="PUNC">(</span><span class="NAME">timeline</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1643</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1644</span> 
<span class='line'>1645</span> </span><span class="WHIT">    </span><span class="COMM">// redraw the delete button and dragareas of the selected item (if any)</span><span class="WHIT">
<span class='line'>1646</span> </span><span class="WHIT">    </span><span class="NAME">this.repaintDeleteButton</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1647</span> </span><span class="WHIT">    </span><span class="NAME">this.repaintDragAreas</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1648</span> 
<span class='line'>1649</span> </span><span class="WHIT">    </span><span class="COMM">// put frame online again</span><span class="WHIT">
<span class='line'>1650</span> </span><span class="WHIT">    </span><span class="NAME">dom.content.appendChild</span><span class="PUNC">(</span><span class="NAME">frame</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1651</span> 
<span class='line'>1652</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">newImageUrls.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1653</span> </span><span class="WHIT">        </span><span class="COMM">// retrieve all image sources from the items, and set a callback once</span><span class="WHIT">
<span class='line'>1654</span> </span><span class="WHIT">        </span><span class="COMM">// all images are retrieved</span><span class="WHIT">
<span class='line'>1655</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">callback</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1656</span> </span><span class="WHIT">            </span><span class="NAME">timeline.render</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1657</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1658</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">sendCallbackWhenAlreadyLoaded</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1659</span> </span><span class="WHIT">        </span><span class="NAME">links.imageloader.loadAll</span><span class="PUNC">(</span><span class="NAME">newImageUrls</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">callback</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">sendCallbackWhenAlreadyLoaded</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1660</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1661</span> 
<span class='line'>1662</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">needsReflow</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1663</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1664</span> 
<span class='line'>1665</span> </span><span class="COMM">/**
<span class='line'>1666</span>  * Reflow the size of the groups
<span class='line'>1667</span>  * @return {boolean} resized    Returns true if any of the frame elements
<span class='line'>1668</span>  *                              have been resized.
<span class='line'>1669</span>  */</span><span class="WHIT">
<span class='line'>1670</span> </span><span class="NAME">links.Timeline.prototype.reflowGroups</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1671</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1672</span> </span><span class="WHIT">        </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1673</span> </span><span class="WHIT">        </span><span class="NAME">size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1674</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1675</span> 
<span class='line'>1676</span> </span><span class="WHIT">    </span><span class="COMM">// calculate the groups width and height</span><span class="WHIT">
<span class='line'>1677</span> </span><span class="WHIT">    </span><span class="COMM">// TODO: only update when data is changed! -> use an updateSeq</span><span class="WHIT">
<span class='line'>1678</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">groupsWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1679</span> 
<span class='line'>1680</span> </span><span class="WHIT">    </span><span class="COMM">// loop through all groups to get the labels width and height</span><span class="WHIT">
<span class='line'>1681</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">groups</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.groups</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1682</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">labels</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom.groups</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">this.dom.groups.labels</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1683</span> </span><span class="WHIT">    </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1684</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1685</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">label</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">labels</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1686</span> </span><span class="WHIT">        </span><span class="NAME">group.labelWidth</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">label</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">label.clientWidth</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1687</span> </span><span class="WHIT">        </span><span class="NAME">group.labelHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">label</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">label.clientHeight</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1688</span> </span><span class="WHIT">        </span><span class="NAME">group.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">group.labelWidth</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="COMM">// TODO: group.width is redundant with labelWidth</span><span class="WHIT">
<span class='line'>1689</span> 
<span class='line'>1690</span> </span><span class="WHIT">        </span><span class="NAME">groupsWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.max</span><span class="PUNC">(</span><span class="NAME">groupsWidth</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">group.width</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1691</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1692</span> 
<span class='line'>1693</span> </span><span class="WHIT">    </span><span class="COMM">// limit groupsWidth to the groups width in the options</span><span class="WHIT">
<span class='line'>1694</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.groupsWidth</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1695</span> </span><span class="WHIT">        </span><span class="NAME">groupsWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.groups.frame</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">dom.groups.frame.clientWidth</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1696</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1697</span> 
<span class='line'>1698</span> </span><span class="WHIT">    </span><span class="COMM">// compensate for the border width. TODO: calculate the real border width</span><span class="WHIT">
<span class='line'>1699</span> </span><span class="WHIT">    </span><span class="NAME">groupsWidth</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1700</span> 
<span class='line'>1701</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">groupsLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.groupsOnRight</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">size.frameWidth</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">groupsWidth</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1702</span> </span><span class="WHIT">    </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">size.groupsWidth</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">groupsWidth</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1703</span> </span><span class="WHIT">    </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">size.groupsLeft</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">groupsLeft</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1704</span> </span><span class="WHIT">    </span><span class="NAME">size.groupsWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groupsWidth</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1705</span> </span><span class="WHIT">    </span><span class="NAME">size.groupsLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groupsLeft</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1706</span> 
<span class='line'>1707</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1708</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1709</span> 
<span class='line'>1710</span> </span><span class="COMM">/**
<span class='line'>1711</span>  * Redraw the group labels
<span class='line'>1712</span>  */</span><span class="WHIT">
<span class='line'>1713</span> </span><span class="NAME">links.Timeline.prototype.repaintGroups</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1714</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1715</span> </span><span class="WHIT">        </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1716</span> </span><span class="WHIT">        </span><span class="NAME">size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1717</span> </span><span class="WHIT">        </span><span class="NAME">groups</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.groups</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1718</span> 
<span class='line'>1719</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.groups</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1720</span> </span><span class="WHIT">        </span><span class="NAME">dom.groups</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1721</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1722</span> 
<span class='line'>1723</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">labels</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.groups.labels</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1724</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">labels</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1725</span> </span><span class="WHIT">        </span><span class="NAME">labels</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1726</span> </span><span class="WHIT">        </span><span class="NAME">dom.groups.labels</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">labels</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1727</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1728</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">labelLines</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.groups.labelLines</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1729</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">labelLines</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1730</span> </span><span class="WHIT">        </span><span class="NAME">labelLines</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1731</span> </span><span class="WHIT">        </span><span class="NAME">dom.groups.labelLines</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">labelLines</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1732</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1733</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">itemLines</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.groups.itemLines</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1734</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">itemLines</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1735</span> </span><span class="WHIT">        </span><span class="NAME">itemLines</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1736</span> </span><span class="WHIT">        </span><span class="NAME">dom.groups.itemLines</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">itemLines</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1737</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1738</span> 
<span class='line'>1739</span> </span><span class="WHIT">    </span><span class="COMM">// create the frame for holding the groups</span><span class="WHIT">
<span class='line'>1740</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">frame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.groups.frame</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1741</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">frame</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1742</span> </span><span class="WHIT">        </span><span class="NAME">frame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT">  </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1743</span> </span><span class="WHIT">        </span><span class="NAME">frame.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-groups-axis"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1744</span> </span><span class="WHIT">        </span><span class="NAME">frame.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1745</span> </span><span class="WHIT">        </span><span class="NAME">frame.style.overflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"hidden"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1746</span> </span><span class="WHIT">        </span><span class="NAME">frame.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1747</span> </span><span class="WHIT">        </span><span class="NAME">frame.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"100%"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1748</span> 
<span class='line'>1749</span> </span><span class="WHIT">        </span><span class="NAME">dom.frame.appendChild</span><span class="PUNC">(</span><span class="NAME">frame</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1750</span> </span><span class="WHIT">        </span><span class="NAME">dom.groups.frame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">frame</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1751</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1752</span> 
<span class='line'>1753</span> </span><span class="WHIT">    </span><span class="NAME">frame.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.groupsLeft</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1754</span> </span><span class="WHIT">    </span><span class="NAME">frame.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.groupsWidth</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT">
<span class='line'>1755</span> </span><span class="WHIT">        </span><span class="NAME">options.groupsWidth</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>1756</span> </span><span class="WHIT">        </span><span class="NAME">size.groupsWidth</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1757</span> 
<span class='line'>1758</span> </span><span class="WHIT">    </span><span class="COMM">// hide groups axis when there are no groups</span><span class="WHIT">
<span class='line'>1759</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">groups.length</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1760</span> </span><span class="WHIT">        </span><span class="NAME">frame.style.display</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'none'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1761</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1762</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1763</span> </span><span class="WHIT">        </span><span class="NAME">frame.style.display</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1764</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1765</span> 
<span class='line'>1766</span> </span><span class="WHIT">    </span><span class="COMM">// TODO: only create/update groups when data is changed.</span><span class="WHIT">
<span class='line'>1767</span> 
<span class='line'>1768</span> </span><span class="WHIT">    </span><span class="COMM">// create the items</span><span class="WHIT">
<span class='line'>1769</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">current</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">labels.length</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1770</span> </span><span class="WHIT">        </span><span class="NAME">needed</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups.length</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1771</span> 
<span class='line'>1772</span> </span><span class="WHIT">    </span><span class="COMM">// overwrite existing group labels</span><span class="WHIT">
<span class='line'>1773</span> </span><span class="WHIT">    </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.min</span><span class="PUNC">(</span><span class="NAME">current</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">needed</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1774</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1775</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">label</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">labels</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1776</span> </span><span class="WHIT">        </span><span class="NAME">label.innerHTML</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getGroupName</span><span class="PUNC">(</span><span class="NAME">group</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1777</span> </span><span class="WHIT">        </span><span class="NAME">label.style.display</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1778</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1779</span> 
<span class='line'>1780</span> </span><span class="WHIT">    </span><span class="COMM">// append new items when needed</span><span class="WHIT">
<span class='line'>1781</span> </span><span class="WHIT">    </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">current</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">needed</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1782</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1783</span> 
<span class='line'>1784</span> </span><span class="WHIT">        </span><span class="COMM">// create text label</span><span class="WHIT">
<span class='line'>1785</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">label</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1786</span> </span><span class="WHIT">        </span><span class="NAME">label.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-groups-text"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1787</span> </span><span class="WHIT">        </span><span class="NAME">label.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1788</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.groupsWidth</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1789</span> </span><span class="WHIT">            </span><span class="NAME">label.style.whiteSpace</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"nowrap"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1790</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1791</span> </span><span class="WHIT">        </span><span class="NAME">label.innerHTML</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getGroupName</span><span class="PUNC">(</span><span class="NAME">group</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1792</span> </span><span class="WHIT">        </span><span class="NAME">frame.appendChild</span><span class="PUNC">(</span><span class="NAME">label</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1793</span> </span><span class="WHIT">        </span><span class="NAME">labels</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">label</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1794</span> 
<span class='line'>1795</span> </span><span class="WHIT">        </span><span class="COMM">// create the grid line between the group labels</span><span class="WHIT">
<span class='line'>1796</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">labelLine</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1797</span> </span><span class="WHIT">        </span><span class="NAME">labelLine.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-axis-grid timeline-axis-grid-minor"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1798</span> </span><span class="WHIT">        </span><span class="NAME">labelLine.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1799</span> </span><span class="WHIT">        </span><span class="NAME">labelLine.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1800</span> </span><span class="WHIT">        </span><span class="NAME">labelLine.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"100%"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1801</span> </span><span class="WHIT">        </span><span class="NAME">labelLine.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1802</span> </span><span class="WHIT">        </span><span class="NAME">labelLine.style.borderTopStyle</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"solid"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1803</span> </span><span class="WHIT">        </span><span class="NAME">frame.appendChild</span><span class="PUNC">(</span><span class="NAME">labelLine</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1804</span> </span><span class="WHIT">        </span><span class="NAME">labelLines</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">labelLine</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1805</span> 
<span class='line'>1806</span> </span><span class="WHIT">        </span><span class="COMM">// create the grid line between the items</span><span class="WHIT">
<span class='line'>1807</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">itemLine</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1808</span> </span><span class="WHIT">        </span><span class="NAME">itemLine.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-axis-grid timeline-axis-grid-minor"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1809</span> </span><span class="WHIT">        </span><span class="NAME">itemLine.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1810</span> </span><span class="WHIT">        </span><span class="NAME">itemLine.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1811</span> </span><span class="WHIT">        </span><span class="NAME">itemLine.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"100%"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1812</span> </span><span class="WHIT">        </span><span class="NAME">itemLine.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1813</span> </span><span class="WHIT">        </span><span class="NAME">itemLine.style.borderTopStyle</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"solid"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1814</span> </span><span class="WHIT">        </span><span class="NAME">dom.content.insertBefore</span><span class="PUNC">(</span><span class="NAME">itemLine</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">dom.content.firstChild</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1815</span> </span><span class="WHIT">        </span><span class="NAME">itemLines</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">itemLine</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1816</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1817</span> 
<span class='line'>1818</span> </span><span class="WHIT">    </span><span class="COMM">// remove redundant items from the DOM when needed</span><span class="WHIT">
<span class='line'>1819</span> </span><span class="WHIT">    </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">needed</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">current</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1820</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">label</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">labels</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1821</span> </span><span class="WHIT">            </span><span class="NAME">labelLine</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">labelLines</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1822</span> </span><span class="WHIT">            </span><span class="NAME">itemLine</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">itemLines</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1823</span> 
<span class='line'>1824</span> </span><span class="WHIT">        </span><span class="NAME">frame.removeChild</span><span class="PUNC">(</span><span class="NAME">label</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1825</span> </span><span class="WHIT">        </span><span class="NAME">frame.removeChild</span><span class="PUNC">(</span><span class="NAME">labelLine</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1826</span> </span><span class="WHIT">        </span><span class="NAME">dom.content.removeChild</span><span class="PUNC">(</span><span class="NAME">itemLine</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1827</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1828</span> </span><span class="WHIT">    </span><span class="NAME">labels.splice</span><span class="PUNC">(</span><span class="NAME">needed</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">current</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">needed</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1829</span> </span><span class="WHIT">    </span><span class="NAME">labelLines.splice</span><span class="PUNC">(</span><span class="NAME">needed</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">current</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">needed</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1830</span> </span><span class="WHIT">    </span><span class="NAME">itemLines.splice</span><span class="PUNC">(</span><span class="NAME">needed</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">current</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">needed</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1831</span> 
<span class='line'>1832</span> </span><span class="WHIT">    </span><span class="NAME">frame.style.borderStyle</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.groupsOnRight</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT">
<span class='line'>1833</span> </span><span class="WHIT">        </span><span class="STRN">"none none none solid"</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>1834</span> </span><span class="WHIT">        </span><span class="STRN">"none solid none none"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1835</span> 
<span class='line'>1836</span> </span><span class="WHIT">    </span><span class="COMM">// position the groups</span><span class="WHIT">
<span class='line'>1837</span> </span><span class="WHIT">    </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1838</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1839</span> </span><span class="WHIT">            </span><span class="NAME">label</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">labels</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1840</span> </span><span class="WHIT">            </span><span class="NAME">labelLine</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">labelLines</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1841</span> </span><span class="WHIT">            </span><span class="NAME">itemLine</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">itemLines</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1842</span> 
<span class='line'>1843</span> </span><span class="WHIT">        </span><span class="NAME">label.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">group.labelTop</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1844</span> </span><span class="WHIT">        </span><span class="NAME">labelLine.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">group.lineTop</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1845</span> </span><span class="WHIT">        </span><span class="NAME">itemLine.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">group.lineTop</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1846</span> </span><span class="WHIT">        </span><span class="NAME">itemLine.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.contentWidth</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1847</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1848</span> 
<span class='line'>1849</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">dom.groups.background</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1850</span> </span><span class="WHIT">        </span><span class="COMM">// create the axis grid line background</span><span class="WHIT">
<span class='line'>1851</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">background</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1852</span> </span><span class="WHIT">        </span><span class="NAME">background.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-axis"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1853</span> </span><span class="WHIT">        </span><span class="NAME">background.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1854</span> </span><span class="WHIT">        </span><span class="NAME">background.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1855</span> </span><span class="WHIT">        </span><span class="NAME">background.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"100%"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1856</span> </span><span class="WHIT">        </span><span class="NAME">background.style.border</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"none"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1857</span> 
<span class='line'>1858</span> </span><span class="WHIT">        </span><span class="NAME">frame.appendChild</span><span class="PUNC">(</span><span class="NAME">background</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1859</span> </span><span class="WHIT">        </span><span class="NAME">dom.groups.background</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">background</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1860</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1861</span> </span><span class="WHIT">    </span><span class="NAME">dom.groups.background.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.axis.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1862</span> </span><span class="WHIT">    </span><span class="NAME">dom.groups.background.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.axis.height</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1863</span> 
<span class='line'>1864</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">dom.groups.line</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1865</span> </span><span class="WHIT">        </span><span class="COMM">// create the axis grid line</span><span class="WHIT">
<span class='line'>1866</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">line</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1867</span> </span><span class="WHIT">        </span><span class="NAME">line.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-axis"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1868</span> </span><span class="WHIT">        </span><span class="NAME">line.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1869</span> </span><span class="WHIT">        </span><span class="NAME">line.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1870</span> </span><span class="WHIT">        </span><span class="NAME">line.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"100%"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1871</span> </span><span class="WHIT">        </span><span class="NAME">line.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1872</span> 
<span class='line'>1873</span> </span><span class="WHIT">        </span><span class="NAME">frame.appendChild</span><span class="PUNC">(</span><span class="NAME">line</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1874</span> </span><span class="WHIT">        </span><span class="NAME">dom.groups.line</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">line</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1875</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1876</span> </span><span class="WHIT">    </span><span class="NAME">dom.groups.line.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.axis.line</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1877</span> 
<span class='line'>1878</span> </span><span class="WHIT">    </span><span class="COMM">// create a callback when there are images which are not yet loaded</span><span class="WHIT">
<span class='line'>1879</span> </span><span class="WHIT">    </span><span class="COMM">// TODO: more efficiently load images in the groups</span><span class="WHIT">
<span class='line'>1880</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.groups.frame</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">groups.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1881</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">imageUrls</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1882</span> </span><span class="WHIT">        </span><span class="NAME">links.imageloader.filterImageUrls</span><span class="PUNC">(</span><span class="NAME">dom.groups.frame</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">imageUrls</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1883</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">imageUrls.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1884</span> </span><span class="WHIT">            </span><span class="COMM">// retrieve all image sources from the items, and set a callback once</span><span class="WHIT">
<span class='line'>1885</span> </span><span class="WHIT">            </span><span class="COMM">// all images are retrieved</span><span class="WHIT">
<span class='line'>1886</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">callback</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1887</span> </span><span class="WHIT">                </span><span class="NAME">timeline.render</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1888</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1889</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">sendCallbackWhenAlreadyLoaded</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1890</span> </span><span class="WHIT">            </span><span class="NAME">links.imageloader.loadAll</span><span class="PUNC">(</span><span class="NAME">imageUrls</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">callback</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">sendCallbackWhenAlreadyLoaded</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1891</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1892</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1893</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1894</span> 
<span class='line'>1895</span> 
<span class='line'>1896</span> </span><span class="COMM">/**
<span class='line'>1897</span>  * Redraw the current time bar
<span class='line'>1898</span>  */</span><span class="WHIT">
<span class='line'>1899</span> </span><span class="NAME">links.Timeline.prototype.repaintCurrentTime</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1900</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1901</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1902</span> </span><span class="WHIT">        </span><span class="NAME">size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1903</span> 
<span class='line'>1904</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">options.showCurrentTime</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1905</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.currentTime</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1906</span> </span><span class="WHIT">            </span><span class="NAME">dom.contentTimelines.removeChild</span><span class="PUNC">(</span><span class="NAME">dom.currentTime</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1907</span> </span><span class="WHIT">            </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">dom.currentTime</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1908</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1909</span> 
<span class='line'>1910</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1911</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1912</span> 
<span class='line'>1913</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">dom.currentTime</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1914</span> </span><span class="WHIT">        </span><span class="COMM">// create the current time bar</span><span class="WHIT">
<span class='line'>1915</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">currentTime</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1916</span> </span><span class="WHIT">        </span><span class="NAME">currentTime.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-currenttime"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1917</span> </span><span class="WHIT">        </span><span class="NAME">currentTime.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1918</span> </span><span class="WHIT">        </span><span class="NAME">currentTime.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1919</span> </span><span class="WHIT">        </span><span class="NAME">currentTime.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"100%"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1920</span> 
<span class='line'>1921</span> </span><span class="WHIT">        </span><span class="NAME">dom.contentTimelines.appendChild</span><span class="PUNC">(</span><span class="NAME">currentTime</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1922</span> </span><span class="WHIT">        </span><span class="NAME">dom.currentTime</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">currentTime</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1923</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1924</span> 
<span class='line'>1925</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">now</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1926</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">nowOffset</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">now.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.clientTimeOffset</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1927</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.timeToScreen</span><span class="PUNC">(</span><span class="NAME">nowOffset</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1928</span> 
<span class='line'>1929</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">visible</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NAME">size.contentWidth</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">size.contentWidth</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1930</span> </span><span class="WHIT">    </span><span class="NAME">dom.currentTime.style.display</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">visible</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="STRN">''</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">'none'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1931</span> </span><span class="WHIT">    </span><span class="NAME">dom.currentTime.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1932</span> </span><span class="WHIT">    </span><span class="NAME">dom.currentTime.title</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"Current time: "</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">nowOffset</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1933</span> 
<span class='line'>1934</span> </span><span class="WHIT">    </span><span class="COMM">// start a timer to adjust for the new time</span><span class="WHIT">
<span class='line'>1935</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.currentTimeTimer</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1936</span> </span><span class="WHIT">        </span><span class="NAME">clearTimeout</span><span class="PUNC">(</span><span class="NAME">this.currentTimeTimer</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1937</span> </span><span class="WHIT">        </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">this.currentTimeTimer</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1938</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1939</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">timeline</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1940</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">onTimeout</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1941</span> </span><span class="WHIT">        </span><span class="NAME">timeline.repaintCurrentTime</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1942</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1943</span> </span><span class="WHIT">    </span><span class="COMM">// the time equal to the width of one pixel, divided by 2 for more smoothness</span><span class="WHIT">
<span class='line'>1944</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">interval</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">this.conversion.factor</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1945</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">interval</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NUMB">30</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">interval</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">30</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1946</span> </span><span class="WHIT">    </span><span class="NAME">this.currentTimeTimer</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">setTimeout</span><span class="PUNC">(</span><span class="NAME">onTimeout</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">interval</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1947</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1948</span> 
<span class='line'>1949</span> </span><span class="COMM">/**
<span class='line'>1950</span>  * Redraw the custom time bar
<span class='line'>1951</span>  */</span><span class="WHIT">
<span class='line'>1952</span> </span><span class="NAME">links.Timeline.prototype.repaintCustomTime</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1953</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1954</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1955</span> </span><span class="WHIT">        </span><span class="NAME">size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1956</span> 
<span class='line'>1957</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">options.showCustomTime</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1958</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.customTime</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1959</span> </span><span class="WHIT">            </span><span class="NAME">dom.contentTimelines.removeChild</span><span class="PUNC">(</span><span class="NAME">dom.customTime</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1960</span> </span><span class="WHIT">            </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">dom.customTime</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1961</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1962</span> 
<span class='line'>1963</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1964</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1965</span> 
<span class='line'>1966</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">dom.customTime</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>1967</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">customTime</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1968</span> </span><span class="WHIT">        </span><span class="NAME">customTime.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-customtime"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1969</span> </span><span class="WHIT">        </span><span class="NAME">customTime.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1970</span> </span><span class="WHIT">        </span><span class="NAME">customTime.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1971</span> </span><span class="WHIT">        </span><span class="NAME">customTime.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"100%"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1972</span> 
<span class='line'>1973</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">drag</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1974</span> </span><span class="WHIT">        </span><span class="NAME">drag.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"relative"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1975</span> </span><span class="WHIT">        </span><span class="NAME">drag.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1976</span> </span><span class="WHIT">        </span><span class="NAME">drag.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"-10px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1977</span> </span><span class="WHIT">        </span><span class="NAME">drag.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"100%"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1978</span> </span><span class="WHIT">        </span><span class="NAME">drag.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"20px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1979</span> </span><span class="WHIT">        </span><span class="NAME">customTime.appendChild</span><span class="PUNC">(</span><span class="NAME">drag</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1980</span> 
<span class='line'>1981</span> </span><span class="WHIT">        </span><span class="NAME">dom.contentTimelines.appendChild</span><span class="PUNC">(</span><span class="NAME">customTime</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1982</span> </span><span class="WHIT">        </span><span class="NAME">dom.customTime</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">customTime</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1983</span> 
<span class='line'>1984</span> </span><span class="WHIT">        </span><span class="COMM">// initialize parameter</span><span class="WHIT">
<span class='line'>1985</span> </span><span class="WHIT">        </span><span class="NAME">this.customTime</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1986</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>1987</span> 
<span class='line'>1988</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.timeToScreen</span><span class="PUNC">(</span><span class="NAME">this.customTime</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>1989</span> </span><span class="WHIT">        </span><span class="NAME">visible</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NAME">size.contentWidth</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">size.contentWidth</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1990</span> </span><span class="WHIT">    </span><span class="NAME">dom.customTime.style.display</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">visible</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="STRN">''</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">'none'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1991</span> </span><span class="WHIT">    </span><span class="NAME">dom.customTime.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1992</span> </span><span class="WHIT">    </span><span class="NAME">dom.customTime.title</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"Time: "</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.customTime</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1993</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>1994</span> 
<span class='line'>1995</span> 
<span class='line'>1996</span> </span><span class="COMM">/**
<span class='line'>1997</span>  * Redraw the delete button, on the top right of the currently selected item
<span class='line'>1998</span>  * if there is no item selected, the button is hidden.
<span class='line'>1999</span>  */</span><span class="WHIT">
<span class='line'>2000</span> </span><span class="NAME">links.Timeline.prototype.repaintDeleteButton</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2001</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">timeline</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2002</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2003</span> </span><span class="WHIT">        </span><span class="NAME">frame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.items.frame</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2004</span> 
<span class='line'>2005</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">deleteButton</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.items.deleteButton</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2006</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">deleteButton</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2007</span> </span><span class="WHIT">        </span><span class="COMM">// create a delete button</span><span class="WHIT">
<span class='line'>2008</span> </span><span class="WHIT">        </span><span class="NAME">deleteButton</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2009</span> </span><span class="WHIT">        </span><span class="NAME">deleteButton.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-navigation-delete"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2010</span> </span><span class="WHIT">        </span><span class="NAME">deleteButton.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2011</span> 
<span class='line'>2012</span> </span><span class="WHIT">        </span><span class="NAME">frame.appendChild</span><span class="PUNC">(</span><span class="NAME">deleteButton</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2013</span> </span><span class="WHIT">        </span><span class="NAME">dom.items.deleteButton</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">deleteButton</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2014</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2015</span> 
<span class='line'>2016</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.selection</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">this.selection.index</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2017</span> </span><span class="WHIT">        </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.selection</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">this.items</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2018</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">item.rendered</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">this.isEditable</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2019</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.getRight</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2020</span> </span><span class="WHIT">            </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.top</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2021</span> 
<span class='line'>2022</span> </span><span class="WHIT">        </span><span class="NAME">deleteButton.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2023</span> </span><span class="WHIT">        </span><span class="NAME">deleteButton.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2024</span> </span><span class="WHIT">        </span><span class="NAME">deleteButton.style.display</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2025</span> </span><span class="WHIT">        </span><span class="NAME">frame.removeChild</span><span class="PUNC">(</span><span class="NAME">deleteButton</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2026</span> </span><span class="WHIT">        </span><span class="NAME">frame.appendChild</span><span class="PUNC">(</span><span class="NAME">deleteButton</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2027</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2028</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2029</span> </span><span class="WHIT">        </span><span class="NAME">deleteButton.style.display</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'none'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2030</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2031</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2032</span> 
<span class='line'>2033</span> 
<span class='line'>2034</span> </span><span class="COMM">/**
<span class='line'>2035</span>  * Redraw the drag areas. When an item (ranges only) is selected,
<span class='line'>2036</span>  * it gets a drag area on the left and right side, to change its width
<span class='line'>2037</span>  */</span><span class="WHIT">
<span class='line'>2038</span> </span><span class="NAME">links.Timeline.prototype.repaintDragAreas</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2039</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">timeline</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2040</span> </span><span class="WHIT">        </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2041</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2042</span> </span><span class="WHIT">        </span><span class="NAME">frame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom.items.frame</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2043</span> 
<span class='line'>2044</span> </span><span class="WHIT">    </span><span class="COMM">// create left drag area</span><span class="WHIT">
<span class='line'>2045</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dragLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.items.dragLeft</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2046</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">dragLeft</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2047</span> </span><span class="WHIT">        </span><span class="NAME">dragLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2048</span> </span><span class="WHIT">        </span><span class="NAME">dragLeft.className</span><span class="PUNC">=</span><span class="STRN">"timeline-event-range-drag-left"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2049</span> </span><span class="WHIT">        </span><span class="NAME">dragLeft.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2050</span> 
<span class='line'>2051</span> </span><span class="WHIT">        </span><span class="NAME">frame.appendChild</span><span class="PUNC">(</span><span class="NAME">dragLeft</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2052</span> </span><span class="WHIT">        </span><span class="NAME">dom.items.dragLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dragLeft</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2053</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2054</span> 
<span class='line'>2055</span> </span><span class="WHIT">    </span><span class="COMM">// create right drag area</span><span class="WHIT">
<span class='line'>2056</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dragRight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.items.dragRight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2057</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">dragRight</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2058</span> </span><span class="WHIT">        </span><span class="NAME">dragRight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2059</span> </span><span class="WHIT">        </span><span class="NAME">dragRight.className</span><span class="PUNC">=</span><span class="STRN">"timeline-event-range-drag-right"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2060</span> </span><span class="WHIT">        </span><span class="NAME">dragRight.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2061</span> 
<span class='line'>2062</span> </span><span class="WHIT">        </span><span class="NAME">frame.appendChild</span><span class="PUNC">(</span><span class="NAME">dragRight</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2063</span> </span><span class="WHIT">        </span><span class="NAME">dom.items.dragRight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dragRight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2064</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2065</span> 
<span class='line'>2066</span> </span><span class="WHIT">    </span><span class="COMM">// reposition left and right drag area</span><span class="WHIT">
<span class='line'>2067</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.selection</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">this.selection.index</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2068</span> </span><span class="WHIT">        </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.selection</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">this.items</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2069</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">item.rendered</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">this.isEditable</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT">
<span class='line'>2070</span> </span><span class="WHIT">        </span><span class="PUNC">(</span><span class="NAME">item</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">links.Timeline.ItemRange</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2071</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.timeToScreen</span><span class="PUNC">(</span><span class="NAME">item.start</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2072</span> </span><span class="WHIT">            </span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.timeToScreen</span><span class="PUNC">(</span><span class="NAME">item.end</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2073</span> </span><span class="WHIT">            </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.top</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2074</span> </span><span class="WHIT">            </span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.height</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2075</span> 
<span class='line'>2076</span> </span><span class="WHIT">        </span><span class="NAME">dragLeft.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2077</span> </span><span class="WHIT">        </span><span class="NAME">dragLeft.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2078</span> </span><span class="WHIT">        </span><span class="NAME">dragLeft.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.dragAreaWidth</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2079</span> </span><span class="WHIT">        </span><span class="NAME">dragLeft.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2080</span> </span><span class="WHIT">        </span><span class="NAME">dragLeft.style.display</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2081</span> </span><span class="WHIT">        </span><span class="NAME">frame.removeChild</span><span class="PUNC">(</span><span class="NAME">dragLeft</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2082</span> </span><span class="WHIT">        </span><span class="NAME">frame.appendChild</span><span class="PUNC">(</span><span class="NAME">dragLeft</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2083</span> 
<span class='line'>2084</span> </span><span class="WHIT">        </span><span class="NAME">dragRight.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">options.dragAreaWidth</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2085</span> </span><span class="WHIT">        </span><span class="NAME">dragRight.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2086</span> </span><span class="WHIT">        </span><span class="NAME">dragRight.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.dragAreaWidth</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2087</span> </span><span class="WHIT">        </span><span class="NAME">dragRight.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2088</span> </span><span class="WHIT">        </span><span class="NAME">dragRight.style.display</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2089</span> </span><span class="WHIT">        </span><span class="NAME">frame.removeChild</span><span class="PUNC">(</span><span class="NAME">dragRight</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2090</span> </span><span class="WHIT">        </span><span class="NAME">frame.appendChild</span><span class="PUNC">(</span><span class="NAME">dragRight</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2091</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2092</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2093</span> </span><span class="WHIT">        </span><span class="NAME">dragLeft.style.display</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'none'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2094</span> </span><span class="WHIT">        </span><span class="NAME">dragRight.style.display</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'none'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2095</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2096</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2097</span> 
<span class='line'>2098</span> </span><span class="COMM">/**
<span class='line'>2099</span>  * Create the navigation buttons for zooming and moving
<span class='line'>2100</span>  */</span><span class="WHIT">
<span class='line'>2101</span> </span><span class="NAME">links.Timeline.prototype.repaintNavigation</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2102</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">timeline</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2103</span> </span><span class="WHIT">        </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2104</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2105</span> </span><span class="WHIT">        </span><span class="NAME">frame</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.frame</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2106</span> </span><span class="WHIT">        </span><span class="NAME">navBar</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.navBar</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2107</span> 
<span class='line'>2108</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">navBar</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2109</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.showNavigation</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">options.showButtonNew</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2110</span> </span><span class="WHIT">            </span><span class="COMM">// create a navigation bar containing the navigation buttons</span><span class="WHIT">
<span class='line'>2111</span> </span><span class="WHIT">            </span><span class="NAME">navBar</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2112</span> </span><span class="WHIT">            </span><span class="NAME">navBar.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2113</span> </span><span class="WHIT">            </span><span class="NAME">navBar.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-navigation"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2114</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.groupsOnRight</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2115</span> </span><span class="WHIT">                </span><span class="NAME">navBar.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'10px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2116</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2117</span> </span><span class="WHIT">            </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2118</span> </span><span class="WHIT">                </span><span class="NAME">navBar.style.right</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'10px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2119</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2120</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.axisOnTop</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2121</span> </span><span class="WHIT">                </span><span class="NAME">navBar.style.bottom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'10px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2122</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2123</span> </span><span class="WHIT">            </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2124</span> </span><span class="WHIT">                </span><span class="NAME">navBar.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'10px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2125</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2126</span> </span><span class="WHIT">            </span><span class="NAME">dom.navBar</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">navBar</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2127</span> </span><span class="WHIT">            </span><span class="NAME">frame.appendChild</span><span class="PUNC">(</span><span class="NAME">navBar</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2128</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2129</span> 
<span class='line'>2130</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.editable</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">options.showButtonNew</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2131</span> </span><span class="WHIT">            </span><span class="COMM">// create a new in button</span><span class="WHIT">
<span class='line'>2132</span> </span><span class="WHIT">            </span><span class="NAME">navBar.addButton</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2133</span> </span><span class="WHIT">            </span><span class="NAME">navBar.addButton.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-navigation-new"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2134</span> 
<span class='line'>2135</span> </span><span class="WHIT">            </span><span class="NAME">navBar.addButton.title</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"Create new event"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2136</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">onAdd</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2137</span> </span><span class="WHIT">                </span><span class="NAME">links.Timeline.preventDefault</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2138</span> </span><span class="WHIT">                </span><span class="NAME">links.Timeline.stopPropagation</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2139</span> 
<span class='line'>2140</span> </span><span class="WHIT">                </span><span class="COMM">// create a new event at the center of the frame</span><span class="WHIT">
<span class='line'>2141</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">w</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">timeline.size.contentWidth</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2142</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">w</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2143</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">xstart</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">timeline.screenToTime</span><span class="PUNC">(</span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">w</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// subtract 10% of timeline width</span><span class="WHIT">
<span class='line'>2144</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">xend</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">timeline.screenToTime</span><span class="PUNC">(</span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">w</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">   </span><span class="COMM">// add 10% of timeline width</span><span class="WHIT">
<span class='line'>2145</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.snapEvents</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2146</span> </span><span class="WHIT">                    </span><span class="NAME">timeline.step.snap</span><span class="PUNC">(</span><span class="NAME">xstart</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2147</span> </span><span class="WHIT">                    </span><span class="NAME">timeline.step.snap</span><span class="PUNC">(</span><span class="NAME">xend</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2148</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2149</span> 
<span class='line'>2150</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">content</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"New"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2151</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">timeline.groups.length</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">timeline.groups</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">content</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2152</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">preventRender</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2153</span> </span><span class="WHIT">                </span><span class="NAME">timeline.addItem</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2154</span> </span><span class="WHIT">                    </span><span class="STRN">'start'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">xstart</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2155</span> </span><span class="WHIT">                    </span><span class="STRN">'end'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">xend</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2156</span> </span><span class="WHIT">                    </span><span class="STRN">'content'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">content</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2157</span> </span><span class="WHIT">                    </span><span class="STRN">'group'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">group</span><span class="WHIT">
<span class='line'>2158</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">preventRender</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2159</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">timeline.items.length</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2160</span> </span><span class="WHIT">                </span><span class="NAME">timeline.selectItem</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2161</span> 
<span class='line'>2162</span> </span><span class="WHIT">                </span><span class="NAME">timeline.applyAdd</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2163</span> 
<span class='line'>2164</span> </span><span class="WHIT">                </span><span class="COMM">// fire an add event.</span><span class="WHIT">
<span class='line'>2165</span> </span><span class="WHIT">                </span><span class="COMM">// Note that the change can be canceled from within an event listener if</span><span class="WHIT">
<span class='line'>2166</span> </span><span class="WHIT">                </span><span class="COMM">// this listener calls the method cancelAdd().</span><span class="WHIT">
<span class='line'>2167</span> </span><span class="WHIT">                </span><span class="NAME">timeline.trigger</span><span class="PUNC">(</span><span class="STRN">'add'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2168</span> 
<span class='line'>2169</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">timeline.applyAdd</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2170</span> </span><span class="WHIT">                    </span><span class="COMM">// render and select the item</span><span class="WHIT">
<span class='line'>2171</span> </span><span class="WHIT">                    </span><span class="NAME">timeline.render</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="NAME">animate</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2172</span> </span><span class="WHIT">                    </span><span class="NAME">timeline.selectItem</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2173</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2174</span> </span><span class="WHIT">                </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2175</span> </span><span class="WHIT">                    </span><span class="COMM">// undo an add</span><span class="WHIT">
<span class='line'>2176</span> </span><span class="WHIT">                    </span><span class="NAME">timeline.deleteItem</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2177</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2178</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2179</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addEventListener</span><span class="PUNC">(</span><span class="NAME">navBar.addButton</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"mousedown"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">onAdd</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2180</span> </span><span class="WHIT">            </span><span class="NAME">navBar.appendChild</span><span class="PUNC">(</span><span class="NAME">navBar.addButton</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2181</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2182</span> 
<span class='line'>2183</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.editable</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">options.showButtonNew</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">options.showNavigation</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2184</span> </span><span class="WHIT">            </span><span class="COMM">// create a separator line</span><span class="WHIT">
<span class='line'>2185</span> </span><span class="WHIT">            </span><span class="NAME">navBar.addButton.style.borderRightWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"1px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2186</span> </span><span class="WHIT">            </span><span class="NAME">navBar.addButton.style.borderRightStyle</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"solid"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2187</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2188</span> 
<span class='line'>2189</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.showNavigation</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2190</span> </span><span class="WHIT">            </span><span class="COMM">// create a zoom in button</span><span class="WHIT">
<span class='line'>2191</span> </span><span class="WHIT">            </span><span class="NAME">navBar.zoomInButton</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2192</span> </span><span class="WHIT">            </span><span class="NAME">navBar.zoomInButton.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-navigation-zoom-in"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2193</span> </span><span class="WHIT">            </span><span class="NAME">navBar.zoomInButton.title</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"Zoom in"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2194</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">onZoomIn</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2195</span> </span><span class="WHIT">                </span><span class="NAME">links.Timeline.preventDefault</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2196</span> </span><span class="WHIT">                </span><span class="NAME">links.Timeline.stopPropagation</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2197</span> </span><span class="WHIT">                </span><span class="NAME">timeline.zoom</span><span class="PUNC">(</span><span class="NUMB">0.4</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2198</span> </span><span class="WHIT">                </span><span class="NAME">timeline.trigger</span><span class="PUNC">(</span><span class="STRN">"rangechange"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2199</span> </span><span class="WHIT">                </span><span class="NAME">timeline.trigger</span><span class="PUNC">(</span><span class="STRN">"rangechanged"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2200</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2201</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addEventListener</span><span class="PUNC">(</span><span class="NAME">navBar.zoomInButton</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"mousedown"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">onZoomIn</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2202</span> </span><span class="WHIT">            </span><span class="NAME">navBar.appendChild</span><span class="PUNC">(</span><span class="NAME">navBar.zoomInButton</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2203</span> 
<span class='line'>2204</span> </span><span class="WHIT">            </span><span class="COMM">// create a zoom out button</span><span class="WHIT">
<span class='line'>2205</span> </span><span class="WHIT">            </span><span class="NAME">navBar.zoomOutButton</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2206</span> </span><span class="WHIT">            </span><span class="NAME">navBar.zoomOutButton.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-navigation-zoom-out"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2207</span> </span><span class="WHIT">            </span><span class="NAME">navBar.zoomOutButton.title</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"Zoom out"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2208</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">onZoomOut</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2209</span> </span><span class="WHIT">                </span><span class="NAME">links.Timeline.preventDefault</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2210</span> </span><span class="WHIT">                </span><span class="NAME">links.Timeline.stopPropagation</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2211</span> </span><span class="WHIT">                </span><span class="NAME">timeline.zoom</span><span class="PUNC">(</span><span class="PUNC">-</span><span class="NUMB">0.4</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2212</span> </span><span class="WHIT">                </span><span class="NAME">timeline.trigger</span><span class="PUNC">(</span><span class="STRN">"rangechange"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2213</span> </span><span class="WHIT">                </span><span class="NAME">timeline.trigger</span><span class="PUNC">(</span><span class="STRN">"rangechanged"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2214</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2215</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addEventListener</span><span class="PUNC">(</span><span class="NAME">navBar.zoomOutButton</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"mousedown"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">onZoomOut</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2216</span> </span><span class="WHIT">            </span><span class="NAME">navBar.appendChild</span><span class="PUNC">(</span><span class="NAME">navBar.zoomOutButton</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2217</span> 
<span class='line'>2218</span> </span><span class="WHIT">            </span><span class="COMM">// create a move left button</span><span class="WHIT">
<span class='line'>2219</span> </span><span class="WHIT">            </span><span class="NAME">navBar.moveLeftButton</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2220</span> </span><span class="WHIT">            </span><span class="NAME">navBar.moveLeftButton.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-navigation-move-left"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2221</span> </span><span class="WHIT">            </span><span class="NAME">navBar.moveLeftButton.title</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"Move left"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2222</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">onMoveLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2223</span> </span><span class="WHIT">                </span><span class="NAME">links.Timeline.preventDefault</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2224</span> </span><span class="WHIT">                </span><span class="NAME">links.Timeline.stopPropagation</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2225</span> </span><span class="WHIT">                </span><span class="NAME">timeline.move</span><span class="PUNC">(</span><span class="PUNC">-</span><span class="NUMB">0.2</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2226</span> </span><span class="WHIT">                </span><span class="NAME">timeline.trigger</span><span class="PUNC">(</span><span class="STRN">"rangechange"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2227</span> </span><span class="WHIT">                </span><span class="NAME">timeline.trigger</span><span class="PUNC">(</span><span class="STRN">"rangechanged"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2228</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2229</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addEventListener</span><span class="PUNC">(</span><span class="NAME">navBar.moveLeftButton</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"mousedown"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">onMoveLeft</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2230</span> </span><span class="WHIT">            </span><span class="NAME">navBar.appendChild</span><span class="PUNC">(</span><span class="NAME">navBar.moveLeftButton</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2231</span> 
<span class='line'>2232</span> </span><span class="WHIT">            </span><span class="COMM">// create a move right button</span><span class="WHIT">
<span class='line'>2233</span> </span><span class="WHIT">            </span><span class="NAME">navBar.moveRightButton</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2234</span> </span><span class="WHIT">            </span><span class="NAME">navBar.moveRightButton.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-navigation-move-right"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2235</span> </span><span class="WHIT">            </span><span class="NAME">navBar.moveRightButton.title</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"Move right"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2236</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">onMoveRight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2237</span> </span><span class="WHIT">                </span><span class="NAME">links.Timeline.preventDefault</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2238</span> </span><span class="WHIT">                </span><span class="NAME">links.Timeline.stopPropagation</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2239</span> </span><span class="WHIT">                </span><span class="NAME">timeline.move</span><span class="PUNC">(</span><span class="NUMB">0.2</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2240</span> </span><span class="WHIT">                </span><span class="NAME">timeline.trigger</span><span class="PUNC">(</span><span class="STRN">"rangechange"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2241</span> </span><span class="WHIT">                </span><span class="NAME">timeline.trigger</span><span class="PUNC">(</span><span class="STRN">"rangechanged"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2242</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2243</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addEventListener</span><span class="PUNC">(</span><span class="NAME">navBar.moveRightButton</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"mousedown"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">onMoveRight</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2244</span> </span><span class="WHIT">            </span><span class="NAME">navBar.appendChild</span><span class="PUNC">(</span><span class="NAME">navBar.moveRightButton</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2245</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2246</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2247</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2248</span> 
<span class='line'>2249</span> 
<span class='line'>2250</span> </span><span class="COMM">/**
<span class='line'>2251</span>  * Set current time. This function can be used to set the time in the client
<span class='line'>2252</span>  * timeline equal with the time on a server.
<span class='line'>2253</span>  * @param {Date} time
<span class='line'>2254</span>  */</span><span class="WHIT">
<span class='line'>2255</span> </span><span class="NAME">links.Timeline.prototype.setCurrentTime</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">time</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2256</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">now</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2257</span> </span><span class="WHIT">    </span><span class="NAME">this.clientTimeOffset</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">time.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">now.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2258</span> 
<span class='line'>2259</span> </span><span class="WHIT">    </span><span class="NAME">this.repaintCurrentTime</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2260</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2261</span> 
<span class='line'>2262</span> </span><span class="COMM">/**
<span class='line'>2263</span>  * Get current time. The time can have an offset from the real time, when
<span class='line'>2264</span>  * the current time has been changed via the method setCurrentTime.
<span class='line'>2265</span>  * @return {Date} time
<span class='line'>2266</span>  */</span><span class="WHIT">
<span class='line'>2267</span> </span><span class="NAME">links.Timeline.prototype.getCurrentTime</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2268</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">now</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2269</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">now.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.clientTimeOffset</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2270</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2271</span> 
<span class='line'>2272</span> 
<span class='line'>2273</span> </span><span class="COMM">/**
<span class='line'>2274</span>  * Set custom time.
<span class='line'>2275</span>  * The custom time bar can be used to display events in past or future.
<span class='line'>2276</span>  * @param {Date} time
<span class='line'>2277</span>  */</span><span class="WHIT">
<span class='line'>2278</span> </span><span class="NAME">links.Timeline.prototype.setCustomTime</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">time</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2279</span> </span><span class="WHIT">    </span><span class="NAME">this.customTime</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">time.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2280</span> </span><span class="WHIT">    </span><span class="NAME">this.repaintCustomTime</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2281</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2282</span> 
<span class='line'>2283</span> </span><span class="COMM">/**
<span class='line'>2284</span>  * Retrieve the current custom time.
<span class='line'>2285</span>  * @return {Date} customTime
<span class='line'>2286</span>  */</span><span class="WHIT">
<span class='line'>2287</span> </span><span class="NAME">links.Timeline.prototype.getCustomTime</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2288</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.customTime.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2289</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2290</span> 
<span class='line'>2291</span> </span><span class="COMM">/**
<span class='line'>2292</span>  * Set a custom scale. Autoscaling will be disabled.
<span class='line'>2293</span>  * For example setScale(SCALE.MINUTES, 5) will result
<span class='line'>2294</span>  * in minor steps of 5 minutes, and major steps of an hour.
<span class='line'>2295</span>  *
<span class='line'>2296</span>  * @param {links.Timeline.StepDate.SCALE} scale
<span class='line'>2297</span>  *                               A scale. Choose from SCALE.MILLISECOND,
<span class='line'>2298</span>  *                               SCALE.SECOND, SCALE.MINUTE, SCALE.HOUR,
<span class='line'>2299</span>  *                               SCALE.WEEKDAY, SCALE.DAY, SCALE.MONTH,
<span class='line'>2300</span>  *                               SCALE.YEAR.
<span class='line'>2301</span>  * @param {int}        step   A step size, by default 1. Choose for
<span class='line'>2302</span>  *                               example 1, 2, 5, or 10.
<span class='line'>2303</span>  */</span><span class="WHIT">
<span class='line'>2304</span> </span><span class="NAME">links.Timeline.prototype.setScale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">scale</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">step</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2305</span> </span><span class="WHIT">    </span><span class="NAME">this.step.setScale</span><span class="PUNC">(</span><span class="NAME">scale</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2306</span> </span><span class="WHIT">    </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// TODO: optimize: only reflow/repaint axis</span><span class="WHIT">
<span class='line'>2307</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2308</span> 
<span class='line'>2309</span> </span><span class="COMM">/**
<span class='line'>2310</span>  * Enable or disable autoscaling
<span class='line'>2311</span>  * @param {boolean} enable  If true or not defined, autoscaling is enabled.
<span class='line'>2312</span>  *                          If false, autoscaling is disabled.
<span class='line'>2313</span>  */</span><span class="WHIT">
<span class='line'>2314</span> </span><span class="NAME">links.Timeline.prototype.setAutoScale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">enable</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2315</span> </span><span class="WHIT">    </span><span class="NAME">this.step.setAutoScale</span><span class="PUNC">(</span><span class="NAME">enable</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2316</span> </span><span class="WHIT">    </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// TODO: optimize: only reflow/repaint axis</span><span class="WHIT">
<span class='line'>2317</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2318</span> 
<span class='line'>2319</span> </span><span class="COMM">/**
<span class='line'>2320</span>  * Redraw the timeline
<span class='line'>2321</span>  * Reloads the (linked) data table and redraws the timeline when resized.
<span class='line'>2322</span>  * See also the method checkResize
<span class='line'>2323</span>  */</span><span class="WHIT">
<span class='line'>2324</span> </span><span class="NAME">links.Timeline.prototype.redraw</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2325</span> </span><span class="WHIT">    </span><span class="NAME">this.setData</span><span class="PUNC">(</span><span class="NAME">this.data</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2326</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2327</span> 
<span class='line'>2328</span> 
<span class='line'>2329</span> </span><span class="COMM">/**
<span class='line'>2330</span>  * Check if the timeline is resized, and if so, redraw the timeline.
<span class='line'>2331</span>  * Useful when the webpage is resized.
<span class='line'>2332</span>  */</span><span class="WHIT">
<span class='line'>2333</span> </span><span class="NAME">links.Timeline.prototype.checkResize</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2334</span> </span><span class="WHIT">    </span><span class="COMM">// TODO: re-implement the method checkResize, or better, make it redundant as this.render will be smarter</span><span class="WHIT">
<span class='line'>2335</span> </span><span class="WHIT">    </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2336</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2337</span> 
<span class='line'>2338</span> </span><span class="COMM">/**
<span class='line'>2339</span>  * Check whether a given item is editable
<span class='line'>2340</span>  * @param {links.Timeline.Item} item
<span class='line'>2341</span>  * @return {boolean} editable
<span class='line'>2342</span>  */</span><span class="WHIT">
<span class='line'>2343</span> </span><span class="NAME">links.Timeline.prototype.isEditable</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2344</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2345</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item.editable</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2346</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">item.editable</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2347</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2348</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2349</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">this.options.editable</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2350</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2351</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2352</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2353</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2354</span> 
<span class='line'>2355</span> </span><span class="COMM">/**
<span class='line'>2356</span>  * Calculate the factor and offset to convert a position on screen to the
<span class='line'>2357</span>  * corresponding date and vice versa.
<span class='line'>2358</span>  * After the method calcConversionFactor is executed once, the methods screenToTime and
<span class='line'>2359</span>  * timeToScreen can be used.
<span class='line'>2360</span>  */</span><span class="WHIT">
<span class='line'>2361</span> </span><span class="NAME">links.Timeline.prototype.recalcConversion</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2362</span> </span><span class="WHIT">    </span><span class="NAME">this.conversion.offset</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2363</span> </span><span class="WHIT">    </span><span class="NAME">this.conversion.factor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size.contentWidth</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT">
<span class='line'>2364</span> </span><span class="WHIT">        </span><span class="PUNC">(</span><span class="NAME">this.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2365</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2366</span> 
<span class='line'>2367</span> 
<span class='line'>2368</span> </span><span class="COMM">/**
<span class='line'>2369</span>  * Convert a position on screen (pixels) to a datetime
<span class='line'>2370</span>  * Before this method can be used, the method calcConversionFactor must be
<span class='line'>2371</span>  * executed once.
<span class='line'>2372</span>  * @param {int}     x    Position on the screen in pixels
<span class='line'>2373</span>  * @return {Date}   time The datetime the corresponds with given position x
<span class='line'>2374</span>  */</span><span class="WHIT">
<span class='line'>2375</span> </span><span class="NAME">links.Timeline.prototype.screenToTime</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">x</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2376</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">conversion</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.conversion</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2377</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">conversion.factor</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">conversion.offset</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2378</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2379</span> 
<span class='line'>2380</span> </span><span class="COMM">/**
<span class='line'>2381</span>  * Convert a datetime (Date object) into a position on the screen
<span class='line'>2382</span>  * Before this method can be used, the method calcConversionFactor must be
<span class='line'>2383</span>  * executed once.
<span class='line'>2384</span>  * @param {Date}   time A date
<span class='line'>2385</span>  * @return {int}   x    The position on the screen in pixels which corresponds
<span class='line'>2386</span>  *                      with the given date.
<span class='line'>2387</span>  */</span><span class="WHIT">
<span class='line'>2388</span> </span><span class="NAME">links.Timeline.prototype.timeToScreen</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">time</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2389</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">conversion</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.conversion</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2390</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">time.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">conversion.offset</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">conversion.factor</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2391</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2392</span> 
<span class='line'>2393</span> 
<span class='line'>2394</span> 
<span class='line'>2395</span> </span><span class="COMM">/**
<span class='line'>2396</span>  * Event handler for touchstart event on mobile devices
<span class='line'>2397</span>  */</span><span class="WHIT">
<span class='line'>2398</span> </span><span class="NAME">links.Timeline.prototype.onTouchStart</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2399</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">params</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.eventParams</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2400</span> </span><span class="WHIT">        </span><span class="NAME">me</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2401</span> 
<span class='line'>2402</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.touchDown</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2403</span> </span><span class="WHIT">        </span><span class="COMM">// if already moving, return</span><span class="WHIT">
<span class='line'>2404</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2405</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2406</span> 
<span class='line'>2407</span> </span><span class="WHIT">    </span><span class="NAME">params.touchDown</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2408</span> </span><span class="WHIT">    </span><span class="NAME">params.zoomed</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2409</span> 
<span class='line'>2410</span> </span><span class="WHIT">    </span><span class="NAME">this.onMouseDown</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2411</span> 
<span class='line'>2412</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">params.onTouchMove</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2413</span> </span><span class="WHIT">        </span><span class="NAME">params.onTouchMove</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="NAME">me.onTouchMove</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2414</span> </span><span class="WHIT">        </span><span class="NAME">links.Timeline.addEventListener</span><span class="PUNC">(</span><span class="NAME">document</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"touchmove"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">params.onTouchMove</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2415</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2416</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">params.onTouchEnd</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2417</span> </span><span class="WHIT">        </span><span class="NAME">params.onTouchEnd</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="NAME">me.onTouchEnd</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2418</span> </span><span class="WHIT">        </span><span class="NAME">links.Timeline.addEventListener</span><span class="PUNC">(</span><span class="NAME">document</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"touchend"</span><span class="PUNC">,</span><span class="WHIT">  </span><span class="NAME">params.onTouchEnd</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2419</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2420</span> 
<span class='line'>2421</span> </span><span class="WHIT">    </span><span class="COMM">/* TODO
<span class='line'>2422</span>      // check for double tap event
<span class='line'>2423</span>      var delta = 500; // ms
<span class='line'>2424</span>      var doubleTapStart = (new Date()).valueOf();
<span class='line'>2425</span>      var target = links.Timeline.getTarget(event);
<span class='line'>2426</span>      var doubleTapItem = this.getItemIndex(target);
<span class='line'>2427</span>      if (params.doubleTapStart &&
<span class='line'>2428</span>      (doubleTapStart - params.doubleTapStart) &lt; delta &&
<span class='line'>2429</span>      doubleTapItem == params.doubleTapItem) {
<span class='line'>2430</span>      delete params.doubleTapStart;
<span class='line'>2431</span>      delete params.doubleTapItem;
<span class='line'>2432</span>      me.onDblClick(event);
<span class='line'>2433</span>      params.touchDown = false;
<span class='line'>2434</span>      }
<span class='line'>2435</span>      params.doubleTapStart = doubleTapStart;
<span class='line'>2436</span>      params.doubleTapItem = doubleTapItem;
<span class='line'>2437</span>      */</span><span class="WHIT">
<span class='line'>2438</span> </span><span class="WHIT">    </span><span class="COMM">// store timing for double taps</span><span class="WHIT">
<span class='line'>2439</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">target</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.getTarget</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2440</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getItemIndex</span><span class="PUNC">(</span><span class="NAME">target</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2441</span> </span><span class="WHIT">    </span><span class="NAME">params.doubleTapStartPrev</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">params.doubleTapStart</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2442</span> </span><span class="WHIT">    </span><span class="NAME">params.doubleTapStart</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2443</span> </span><span class="WHIT">    </span><span class="NAME">params.doubleTapItemPrev</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">params.doubleTapItem</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2444</span> </span><span class="WHIT">    </span><span class="NAME">params.doubleTapItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2445</span> 
<span class='line'>2446</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.preventDefault</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2447</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2448</span> 
<span class='line'>2449</span> </span><span class="COMM">/**
<span class='line'>2450</span>  * Event handler for touchmove event on mobile devices
<span class='line'>2451</span>  */</span><span class="WHIT">
<span class='line'>2452</span> </span><span class="NAME">links.Timeline.prototype.onTouchMove</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2453</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">params</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.eventParams</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2454</span> 
<span class='line'>2455</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event.scale</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">event.scale</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2456</span> </span><span class="WHIT">        </span><span class="NAME">params.zoomed</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2457</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2458</span> 
<span class='line'>2459</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">params.zoomed</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2460</span> </span><span class="WHIT">        </span><span class="COMM">// move </span><span class="WHIT">
<span class='line'>2461</span> </span><span class="WHIT">        </span><span class="NAME">this.onMouseMove</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2462</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2463</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2464</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.options.zoomable</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2465</span> </span><span class="WHIT">            </span><span class="COMM">// pinch</span><span class="WHIT">
<span class='line'>2466</span> </span><span class="WHIT">            </span><span class="COMM">// TODO: pinch only supported on iPhone/iPad. Create something manually for Android?</span><span class="WHIT">
<span class='line'>2467</span> </span><span class="WHIT">            </span><span class="NAME">params.zoomed</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2468</span> 
<span class='line'>2469</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">event.scale</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2470</span> </span><span class="WHIT">                </span><span class="NAME">oldWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">params.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2471</span> </span><span class="WHIT">                </span><span class="NAME">newWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">oldWidth</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">scale</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2472</span> </span><span class="WHIT">                </span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">newWidth</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">oldWidth</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2473</span> </span><span class="WHIT">                </span><span class="NAME">start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">parseInt</span><span class="PUNC">(</span><span class="NAME">params.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2474</span> </span><span class="WHIT">                </span><span class="NAME">end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">parseInt</span><span class="PUNC">(</span><span class="NAME">params.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2475</span> 
<span class='line'>2476</span> </span><span class="WHIT">            </span><span class="COMM">// TODO: determine zoom-around-date from touch positions?</span><span class="WHIT">
<span class='line'>2477</span> 
<span class='line'>2478</span> </span><span class="WHIT">            </span><span class="NAME">this.setVisibleChartRange</span><span class="PUNC">(</span><span class="NAME">start</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2479</span> </span><span class="WHIT">            </span><span class="NAME">this.trigger</span><span class="PUNC">(</span><span class="STRN">"rangechange"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2480</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2481</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2482</span> 
<span class='line'>2483</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.preventDefault</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2484</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2485</span> 
<span class='line'>2486</span> </span><span class="COMM">/**
<span class='line'>2487</span>  * Event handler for touchend event on mobile devices
<span class='line'>2488</span>  */</span><span class="WHIT">
<span class='line'>2489</span> </span><span class="NAME">links.Timeline.prototype.onTouchEnd</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2490</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">params</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.eventParams</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2491</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">me</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2492</span> </span><span class="WHIT">    </span><span class="NAME">params.touchDown</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2493</span> 
<span class='line'>2494</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.zoomed</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2495</span> </span><span class="WHIT">        </span><span class="NAME">this.trigger</span><span class="PUNC">(</span><span class="STRN">"rangechanged"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2496</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2497</span> 
<span class='line'>2498</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.onTouchMove</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2499</span> </span><span class="WHIT">        </span><span class="NAME">links.Timeline.removeEventListener</span><span class="PUNC">(</span><span class="NAME">document</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"touchmove"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">params.onTouchMove</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2500</span> </span><span class="WHIT">        </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">params.onTouchMove</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2501</span> 
<span class='line'>2502</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2503</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.onTouchEnd</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2504</span> </span><span class="WHIT">        </span><span class="NAME">links.Timeline.removeEventListener</span><span class="PUNC">(</span><span class="NAME">document</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"touchend"</span><span class="PUNC">,</span><span class="WHIT">  </span><span class="NAME">params.onTouchEnd</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2505</span> </span><span class="WHIT">        </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">params.onTouchEnd</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2506</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2507</span> 
<span class='line'>2508</span> </span><span class="WHIT">    </span><span class="NAME">this.onMouseUp</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2509</span> 
<span class='line'>2510</span> </span><span class="WHIT">    </span><span class="COMM">// check for double tap event</span><span class="WHIT">
<span class='line'>2511</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">delta</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">500</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// ms</span><span class="WHIT">
<span class='line'>2512</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">doubleTapEnd</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2513</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">target</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.getTarget</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2514</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">doubleTapItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getItemIndex</span><span class="PUNC">(</span><span class="NAME">target</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2515</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.doubleTapStartPrev</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT">
<span class='line'>2516</span> </span><span class="WHIT">        </span><span class="PUNC">(</span><span class="NAME">doubleTapEnd</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">params.doubleTapStartPrev</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">delta</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT">
<span class='line'>2517</span> </span><span class="WHIT">        </span><span class="NAME">params.doubleTapItem</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">params.doubleTapItemPrev</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2518</span> </span><span class="WHIT">        </span><span class="NAME">params.touchDown</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2519</span> </span><span class="WHIT">        </span><span class="NAME">me.onDblClick</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2520</span> </span><span class="WHIT">        </span><span class="NAME">params.touchDown</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2521</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2522</span> 
<span class='line'>2523</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.preventDefault</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2524</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2525</span> 
<span class='line'>2526</span> 
<span class='line'>2527</span> </span><span class="COMM">/**
<span class='line'>2528</span>  * Start a moving operation inside the provided parent element
<span class='line'>2529</span>  * @param {Event} event       The event that occurred (required for
<span class='line'>2530</span>  *                             retrieving the  mouse position)
<span class='line'>2531</span>  */</span><span class="WHIT">
<span class='line'>2532</span> </span><span class="NAME">links.Timeline.prototype.onMouseDown</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2533</span> </span><span class="WHIT">    </span><span class="NAME">event</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">event</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">window.event</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2534</span> 
<span class='line'>2535</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">params</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.eventParams</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2536</span> </span><span class="WHIT">        </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2537</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2538</span> 
<span class='line'>2539</span> </span><span class="WHIT">    </span><span class="COMM">// only react on left mouse button down</span><span class="WHIT">
<span class='line'>2540</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">leftButtonDown</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">event.which</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event.which</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event.button</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2541</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">leftButtonDown</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">!</span><span class="NAME">params.touchDown</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2542</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2543</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2544</span> 
<span class='line'>2545</span> </span><span class="WHIT">    </span><span class="COMM">// get mouse position</span><span class="WHIT">
<span class='line'>2546</span> </span><span class="WHIT">    </span><span class="NAME">params.mouseX</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.getPageX</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2547</span> </span><span class="WHIT">    </span><span class="NAME">params.mouseY</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.getPageY</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2548</span> </span><span class="WHIT">    </span><span class="NAME">params.frameLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.getAbsoluteLeft</span><span class="PUNC">(</span><span class="NAME">this.dom.content</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2549</span> </span><span class="WHIT">    </span><span class="NAME">params.frameTop</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.getAbsoluteTop</span><span class="PUNC">(</span><span class="NAME">this.dom.content</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2550</span> </span><span class="WHIT">    </span><span class="NAME">params.previousLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2551</span> </span><span class="WHIT">    </span><span class="NAME">params.previousOffset</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2552</span> 
<span class='line'>2553</span> </span><span class="WHIT">    </span><span class="NAME">params.moved</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2554</span> </span><span class="WHIT">    </span><span class="NAME">params.start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2555</span> </span><span class="WHIT">    </span><span class="NAME">params.end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2556</span> 
<span class='line'>2557</span> </span><span class="WHIT">    </span><span class="NAME">params.target</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.getTarget</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2558</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dragLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.items</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">dom.items.dragLeft</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">dom.items.dragLeft</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2559</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dragRight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.items</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">dom.items.dragRight</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">dom.items.dragRight</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2560</span> </span><span class="WHIT">    </span><span class="NAME">params.itemDragLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.target</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="NAME">dragLeft</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2561</span> </span><span class="WHIT">    </span><span class="NAME">params.itemDragRight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.target</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="NAME">dragRight</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2562</span> 
<span class='line'>2563</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.itemDragLeft</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">params.itemDragRight</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2564</span> </span><span class="WHIT">        </span><span class="NAME">params.itemIndex</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.selection</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">this.selection.index</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2565</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2566</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2567</span> </span><span class="WHIT">        </span><span class="NAME">params.itemIndex</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getItemIndex</span><span class="PUNC">(</span><span class="NAME">params.target</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2568</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2569</span> 
<span class='line'>2570</span> </span><span class="WHIT">    </span><span class="NAME">params.customTime</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.target</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="NAME">dom.customTime</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT">
<span class='line'>2571</span> </span><span class="WHIT">        </span><span class="NAME">params.target.parentNode</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="NAME">dom.customTime</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT">
<span class='line'>2572</span> </span><span class="WHIT">        </span><span class="NAME">this.customTime</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>2573</span> </span><span class="WHIT">        </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2574</span> 
<span class='line'>2575</span> </span><span class="WHIT">    </span><span class="NAME">params.addItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.editable</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">event.ctrlKey</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2576</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.addItem</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2577</span> </span><span class="WHIT">        </span><span class="COMM">// create a new event at the current mouse position</span><span class="WHIT">
<span class='line'>2578</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">params.mouseX</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">params.frameLeft</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2579</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">y</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">params.mouseY</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">params.frameTop</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2580</span> 
<span class='line'>2581</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">xstart</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.screenToTime</span><span class="PUNC">(</span><span class="NAME">x</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2582</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.snapEvents</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2583</span> </span><span class="WHIT">            </span><span class="NAME">this.step.snap</span><span class="PUNC">(</span><span class="NAME">xstart</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2584</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2585</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">xend</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">xstart.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2586</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">content</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"New"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2587</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getGroupFromHeight</span><span class="PUNC">(</span><span class="NAME">y</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2588</span> </span><span class="WHIT">        </span><span class="NAME">this.addItem</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2589</span> </span><span class="WHIT">            </span><span class="STRN">'start'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">xstart</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2590</span> </span><span class="WHIT">            </span><span class="STRN">'end'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">xend</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2591</span> </span><span class="WHIT">            </span><span class="STRN">'content'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">content</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2592</span> </span><span class="WHIT">            </span><span class="STRN">'group'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">this.getGroupName</span><span class="PUNC">(</span><span class="NAME">group</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>2593</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2594</span> </span><span class="WHIT">        </span><span class="NAME">params.itemIndex</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.items.length</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2595</span> </span><span class="WHIT">        </span><span class="NAME">this.selectItem</span><span class="PUNC">(</span><span class="NAME">params.itemIndex</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2596</span> </span><span class="WHIT">        </span><span class="NAME">params.itemDragRight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2597</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2598</span> 
<span class='line'>2599</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.items</span><span class="PUNC">[</span><span class="NAME">params.itemIndex</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2600</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">isSelected</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.isSelected</span><span class="PUNC">(</span><span class="NAME">params.itemIndex</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2601</span> </span><span class="WHIT">    </span><span class="NAME">params.editItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">isSelected</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">this.isEditable</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2602</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.editItem</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2603</span> </span><span class="WHIT">        </span><span class="NAME">params.itemStart</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.start</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2604</span> </span><span class="WHIT">        </span><span class="NAME">params.itemEnd</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.end</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2605</span> </span><span class="WHIT">        </span><span class="NAME">params.itemGroup</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.group</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2606</span> </span><span class="WHIT">        </span><span class="NAME">params.itemLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.start</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">this.timeToScreen</span><span class="PUNC">(</span><span class="NAME">item.start</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2607</span> </span><span class="WHIT">        </span><span class="NAME">params.itemRight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.end</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">this.timeToScreen</span><span class="PUNC">(</span><span class="NAME">item.end</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2608</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2609</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2610</span> </span><span class="WHIT">        </span><span class="NAME">this.dom.frame.style.cursor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'move'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2611</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2612</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">params.touchDown</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2613</span> </span><span class="WHIT">        </span><span class="COMM">// add event listeners to handle moving the contents</span><span class="WHIT">
<span class='line'>2614</span> </span><span class="WHIT">        </span><span class="COMM">// we store the function onmousemove and onmouseup in the timeline, so we can</span><span class="WHIT">
<span class='line'>2615</span> </span><span class="WHIT">        </span><span class="COMM">// remove the eventlisteners lateron in the function mouseUp()</span><span class="WHIT">
<span class='line'>2616</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">me</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2617</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">params.onMouseMove</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2618</span> </span><span class="WHIT">            </span><span class="NAME">params.onMouseMove</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="NAME">me.onMouseMove</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2619</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addEventListener</span><span class="PUNC">(</span><span class="NAME">document</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"mousemove"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">params.onMouseMove</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2620</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2621</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">params.onMouseUp</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2622</span> </span><span class="WHIT">            </span><span class="NAME">params.onMouseUp</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="NAME">me.onMouseUp</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2623</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addEventListener</span><span class="PUNC">(</span><span class="NAME">document</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"mouseup"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">params.onMouseUp</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2624</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2625</span> 
<span class='line'>2626</span> </span><span class="WHIT">        </span><span class="NAME">links.Timeline.preventDefault</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2627</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2628</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2629</span> 
<span class='line'>2630</span> 
<span class='line'>2631</span> </span><span class="COMM">/**
<span class='line'>2632</span>  * Perform moving operating.
<span class='line'>2633</span>  * This function activated from within the funcion links.Timeline.onMouseDown().
<span class='line'>2634</span>  * @param {Event}   event  Well, eehh, the event
<span class='line'>2635</span>  */</span><span class="WHIT">
<span class='line'>2636</span> </span><span class="NAME">links.Timeline.prototype.onMouseMove</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2637</span> </span><span class="WHIT">    </span><span class="NAME">event</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">event</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">window.event</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2638</span> 
<span class='line'>2639</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">params</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.eventParams</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2640</span> </span><span class="WHIT">        </span><span class="NAME">size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2641</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2642</span> </span><span class="WHIT">        </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2643</span> 
<span class='line'>2644</span> </span><span class="WHIT">    </span><span class="COMM">// calculate change in mouse position</span><span class="WHIT">
<span class='line'>2645</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">mouseX</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.getPageX</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2646</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">mouseY</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.getPageY</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2647</span> 
<span class='line'>2648</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.mouseX</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2649</span> </span><span class="WHIT">        </span><span class="NAME">params.mouseX</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">mouseX</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2650</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2651</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.mouseY</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2652</span> </span><span class="WHIT">        </span><span class="NAME">params.mouseY</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">mouseY</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2653</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2654</span> 
<span class='line'>2655</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">diffX</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">mouseX</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">params.mouseX</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2656</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">diffY</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">mouseY</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">params.mouseY</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2657</span> 
<span class='line'>2658</span> </span><span class="WHIT">    </span><span class="COMM">// if mouse movement is big enough, register it as a "moved" event</span><span class="WHIT">
<span class='line'>2659</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">Math.abs</span><span class="PUNC">(</span><span class="NAME">diffX</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">>=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2660</span> </span><span class="WHIT">        </span><span class="NAME">params.moved</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2661</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2662</span> 
<span class='line'>2663</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.customTime</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2664</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.timeToScreen</span><span class="PUNC">(</span><span class="NAME">params.customTime</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2665</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">xnew</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">diffX</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2666</span> </span><span class="WHIT">        </span><span class="NAME">this.customTime</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.screenToTime</span><span class="PUNC">(</span><span class="NAME">xnew</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2667</span> </span><span class="WHIT">        </span><span class="NAME">this.repaintCustomTime</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2668</span> 
<span class='line'>2669</span> </span><span class="WHIT">        </span><span class="COMM">// fire a timechange event</span><span class="WHIT">
<span class='line'>2670</span> </span><span class="WHIT">        </span><span class="NAME">this.trigger</span><span class="PUNC">(</span><span class="STRN">'timechange'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2671</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2672</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.editItem</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2673</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.items</span><span class="PUNC">[</span><span class="NAME">params.itemIndex</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2674</span> </span><span class="WHIT">            </span><span class="NAME">left</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2675</span> </span><span class="WHIT">            </span><span class="NAME">right</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2676</span> 
<span class='line'>2677</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.itemDragLeft</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2678</span> </span><span class="WHIT">            </span><span class="COMM">// move the start of the item</span><span class="WHIT">
<span class='line'>2679</span> </span><span class="WHIT">            </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">params.itemLeft</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">diffX</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2680</span> </span><span class="WHIT">            </span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">params.itemRight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2681</span> 
<span class='line'>2682</span> </span><span class="WHIT">            </span><span class="NAME">item.start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.screenToTime</span><span class="PUNC">(</span><span class="NAME">left</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2683</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.snapEvents</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2684</span> </span><span class="WHIT">                </span><span class="NAME">this.step.snap</span><span class="PUNC">(</span><span class="NAME">item.start</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2685</span> </span><span class="WHIT">                </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.timeToScreen</span><span class="PUNC">(</span><span class="NAME">item.start</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2686</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2687</span> 
<span class='line'>2688</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">right</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2689</span> </span><span class="WHIT">                </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">right</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2690</span> </span><span class="WHIT">                </span><span class="NAME">item.start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.screenToTime</span><span class="PUNC">(</span><span class="NAME">left</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2691</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2692</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2693</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.itemDragRight</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2694</span> </span><span class="WHIT">            </span><span class="COMM">// move the end of the item</span><span class="WHIT">
<span class='line'>2695</span> </span><span class="WHIT">            </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">params.itemLeft</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2696</span> </span><span class="WHIT">            </span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">params.itemRight</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">diffX</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2697</span> 
<span class='line'>2698</span> </span><span class="WHIT">            </span><span class="NAME">item.end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.screenToTime</span><span class="PUNC">(</span><span class="NAME">right</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2699</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.snapEvents</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2700</span> </span><span class="WHIT">                </span><span class="NAME">this.step.snap</span><span class="PUNC">(</span><span class="NAME">item.end</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2701</span> </span><span class="WHIT">                </span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.timeToScreen</span><span class="PUNC">(</span><span class="NAME">item.end</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2702</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2703</span> 
<span class='line'>2704</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">left</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2705</span> </span><span class="WHIT">                </span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">left</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2706</span> </span><span class="WHIT">                </span><span class="NAME">item.end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.screenToTime</span><span class="PUNC">(</span><span class="NAME">right</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2707</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2708</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2709</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2710</span> </span><span class="WHIT">            </span><span class="COMM">// move the item</span><span class="WHIT">
<span class='line'>2711</span> </span><span class="WHIT">            </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">params.itemLeft</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">diffX</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2712</span> </span><span class="WHIT">            </span><span class="NAME">item.start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.screenToTime</span><span class="PUNC">(</span><span class="NAME">left</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2713</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.snapEvents</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2714</span> </span><span class="WHIT">                </span><span class="NAME">this.step.snap</span><span class="PUNC">(</span><span class="NAME">item.start</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2715</span> </span><span class="WHIT">                </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.timeToScreen</span><span class="PUNC">(</span><span class="NAME">item.start</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2716</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2717</span> 
<span class='line'>2718</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item.end</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2719</span> </span><span class="WHIT">                </span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.itemRight</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">params.itemLeft</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2720</span> </span><span class="WHIT">                </span><span class="NAME">item.end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.screenToTime</span><span class="PUNC">(</span><span class="NAME">right</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2721</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2722</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2723</span> 
<span class='line'>2724</span> </span><span class="WHIT">        </span><span class="NAME">item.setPosition</span><span class="PUNC">(</span><span class="NAME">left</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">right</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2725</span> 
<span class='line'>2726</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dragging</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">params.itemDragLeft</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">params.itemDragRight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2727</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.groups.length</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">!</span><span class="NAME">dragging</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2728</span> </span><span class="WHIT">            </span><span class="COMM">// move item from one group to another when needed</span><span class="WHIT">
<span class='line'>2729</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">y</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">mouseY</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">params.frameTop</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2730</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getGroupFromHeight</span><span class="PUNC">(</span><span class="NAME">y</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2731</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.groupsChangeable</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">item.group</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="NAME">group</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2732</span> </span><span class="WHIT">                </span><span class="COMM">// move item to the other group</span><span class="WHIT">
<span class='line'>2733</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.items.indexOf</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2734</span> </span><span class="WHIT">                </span><span class="NAME">this.changeItem</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="STRN">'group'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">this.getGroupName</span><span class="PUNC">(</span><span class="NAME">group</span><span class="PUNC">)</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2735</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2736</span> </span><span class="WHIT">            </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2737</span> </span><span class="WHIT">                </span><span class="NAME">this.repaintDeleteButton</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2738</span> </span><span class="WHIT">                </span><span class="NAME">this.repaintDragAreas</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2739</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2740</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2741</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2742</span> </span><span class="WHIT">            </span><span class="COMM">// TODO: does not work well in FF, forces redraw with every mouse move it seems</span><span class="WHIT">
<span class='line'>2743</span> </span><span class="WHIT">            </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// TODO: optimize, only redraw the items?</span><span class="WHIT">
<span class='line'>2744</span> </span><span class="WHIT">            </span><span class="COMM">// Note: when animate==true, no redraw is needed here, its done by stackItems animation</span><span class="WHIT">
<span class='line'>2745</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2746</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2747</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.moveable</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2748</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">interval</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">params.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2749</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">diffMillisecs</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="PUNC">(</span><span class="PUNC">-</span><span class="NAME">diffX</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">size.contentWidth</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">interval</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2750</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">newStart</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">params.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">diffMillisecs</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2751</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">newEnd</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">params.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">diffMillisecs</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2752</span> </span><span class="WHIT">        </span><span class="NAME">this.applyRange</span><span class="PUNC">(</span><span class="NAME">newStart</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">newEnd</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2753</span> </span><span class="WHIT">        </span><span class="COMM">// if the applied range is moved due to a fixed min or max,</span><span class="WHIT">
<span class='line'>2754</span> </span><span class="WHIT">        </span><span class="COMM">// change the diffMillisecs accordingly</span><span class="WHIT">
<span class='line'>2755</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">appliedDiff</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">newStart.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2756</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">appliedDiff</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2757</span> </span><span class="WHIT">            </span><span class="NAME">diffMillisecs</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">appliedDiff</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2758</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2759</span> 
<span class='line'>2760</span> </span><span class="WHIT">        </span><span class="NAME">this.recalcConversion</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2761</span> 
<span class='line'>2762</span> </span><span class="WHIT">        </span><span class="COMM">// move the items by changing the left position of their frame.</span><span class="WHIT">
<span class='line'>2763</span> </span><span class="WHIT">        </span><span class="COMM">// this is much faster than repositioning all elements individually via the </span><span class="WHIT">
<span class='line'>2764</span> </span><span class="WHIT">        </span><span class="COMM">// repaintFrame() function (which is done once at mouseup)</span><span class="WHIT">
<span class='line'>2765</span> </span><span class="WHIT">        </span><span class="COMM">// note that we round diffX to prevent wrong positioning on millisecond scale</span><span class="WHIT">
<span class='line'>2766</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">previousLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">params.previousLeft</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2767</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">currentLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">parseFloat</span><span class="PUNC">(</span><span class="NAME">dom.items.frame.style.left</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2768</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">previousOffset</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">params.previousOffset</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2769</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">frameOffset</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">previousOffset</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">currentLeft</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">previousLeft</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2770</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">frameLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NAME">diffMillisecs</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">interval</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">size.contentWidth</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">frameOffset</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2771</span> 
<span class='line'>2772</span> </span><span class="WHIT">        </span><span class="NAME">dom.items.frame.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">frameLeft</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2773</span> 
<span class='line'>2774</span> </span><span class="WHIT">        </span><span class="COMM">// read the left again from DOM (IE8- rounds the value)</span><span class="WHIT">
<span class='line'>2775</span> </span><span class="WHIT">        </span><span class="NAME">params.previousOffset</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">frameOffset</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2776</span> </span><span class="WHIT">        </span><span class="NAME">params.previousLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">parseFloat</span><span class="PUNC">(</span><span class="NAME">dom.items.frame.style.left</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">frameLeft</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2777</span> 
<span class='line'>2778</span> </span><span class="WHIT">        </span><span class="NAME">this.repaintCurrentTime</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2779</span> </span><span class="WHIT">        </span><span class="NAME">this.repaintCustomTime</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2780</span> </span><span class="WHIT">        </span><span class="NAME">this.repaintAxis</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2781</span> 
<span class='line'>2782</span> </span><span class="WHIT">        </span><span class="COMM">// fire a rangechange event</span><span class="WHIT">
<span class='line'>2783</span> </span><span class="WHIT">        </span><span class="NAME">this.trigger</span><span class="PUNC">(</span><span class="STRN">'rangechange'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2784</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2785</span> 
<span class='line'>2786</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.preventDefault</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2787</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2788</span> 
<span class='line'>2789</span> 
<span class='line'>2790</span> </span><span class="COMM">/**
<span class='line'>2791</span>  * Stop moving operating.
<span class='line'>2792</span>  * This function activated from within the funcion links.Timeline.onMouseDown().
<span class='line'>2793</span>  * @param {event}  event   The event
<span class='line'>2794</span>  */</span><span class="WHIT">
<span class='line'>2795</span> </span><span class="NAME">links.Timeline.prototype.onMouseUp</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2796</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">params</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.eventParams</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2797</span> </span><span class="WHIT">        </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2798</span> 
<span class='line'>2799</span> </span><span class="WHIT">    </span><span class="NAME">event</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">event</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">window.event</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2800</span> 
<span class='line'>2801</span> </span><span class="WHIT">    </span><span class="NAME">this.dom.frame.style.cursor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'auto'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2802</span> 
<span class='line'>2803</span> </span><span class="WHIT">    </span><span class="COMM">// remove event listeners here, important for Safari</span><span class="WHIT">
<span class='line'>2804</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.onMouseMove</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2805</span> </span><span class="WHIT">        </span><span class="NAME">links.Timeline.removeEventListener</span><span class="PUNC">(</span><span class="NAME">document</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"mousemove"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">params.onMouseMove</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2806</span> </span><span class="WHIT">        </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">params.onMouseMove</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2807</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2808</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.onMouseUp</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2809</span> </span><span class="WHIT">        </span><span class="NAME">links.Timeline.removeEventListener</span><span class="PUNC">(</span><span class="NAME">document</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"mouseup"</span><span class="PUNC">,</span><span class="WHIT">   </span><span class="NAME">params.onMouseUp</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2810</span> </span><span class="WHIT">        </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">params.onMouseUp</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2811</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2812</span> </span><span class="WHIT">    </span><span class="COMM">//links.Timeline.preventDefault(event);</span><span class="WHIT">
<span class='line'>2813</span> 
<span class='line'>2814</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.customTime</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2815</span> </span><span class="WHIT">        </span><span class="COMM">// fire a timechanged event</span><span class="WHIT">
<span class='line'>2816</span> </span><span class="WHIT">        </span><span class="NAME">this.trigger</span><span class="PUNC">(</span><span class="STRN">'timechanged'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2817</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2818</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.editItem</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2819</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.items</span><span class="PUNC">[</span><span class="NAME">params.itemIndex</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2820</span> 
<span class='line'>2821</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.moved</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">params.addItem</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2822</span> </span><span class="WHIT">            </span><span class="NAME">this.applyChange</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2823</span> </span><span class="WHIT">            </span><span class="NAME">this.applyAdd</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2824</span> 
<span class='line'>2825</span> </span><span class="WHIT">            </span><span class="NAME">this.updateData</span><span class="PUNC">(</span><span class="NAME">params.itemIndex</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2826</span> </span><span class="WHIT">                </span><span class="STRN">'start'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">item.start</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2827</span> </span><span class="WHIT">                </span><span class="STRN">'end'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">item.end</span><span class="WHIT">
<span class='line'>2828</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2829</span> 
<span class='line'>2830</span> </span><span class="WHIT">            </span><span class="COMM">// fire an add or change event. </span><span class="WHIT">
<span class='line'>2831</span> </span><span class="WHIT">            </span><span class="COMM">// Note that the change can be canceled from within an event listener if </span><span class="WHIT">
<span class='line'>2832</span> </span><span class="WHIT">            </span><span class="COMM">// this listener calls the method cancelChange().</span><span class="WHIT">
<span class='line'>2833</span> </span><span class="WHIT">            </span><span class="NAME">this.trigger</span><span class="PUNC">(</span><span class="NAME">params.addItem</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="STRN">'add'</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">'change'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2834</span> 
<span class='line'>2835</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.addItem</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2836</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.applyAdd</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2837</span> </span><span class="WHIT">                    </span><span class="NAME">this.updateData</span><span class="PUNC">(</span><span class="NAME">params.itemIndex</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2838</span> </span><span class="WHIT">                        </span><span class="STRN">'start'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">item.start</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2839</span> </span><span class="WHIT">                        </span><span class="STRN">'end'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">item.end</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2840</span> </span><span class="WHIT">                        </span><span class="STRN">'content'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">item.content</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2841</span> </span><span class="WHIT">                        </span><span class="STRN">'group'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">this.getGroupName</span><span class="PUNC">(</span><span class="NAME">item.group</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>2842</span> </span><span class="WHIT">                    </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2843</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2844</span> </span><span class="WHIT">                </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2845</span> </span><span class="WHIT">                    </span><span class="COMM">// undo an add</span><span class="WHIT">
<span class='line'>2846</span> </span><span class="WHIT">                    </span><span class="NAME">this.deleteItem</span><span class="PUNC">(</span><span class="NAME">params.itemIndex</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2847</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2848</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2849</span> </span><span class="WHIT">            </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2850</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.applyChange</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2851</span> </span><span class="WHIT">                    </span><span class="NAME">this.updateData</span><span class="PUNC">(</span><span class="NAME">params.itemIndex</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2852</span> </span><span class="WHIT">                        </span><span class="STRN">'start'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">item.start</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2853</span> </span><span class="WHIT">                        </span><span class="STRN">'end'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">item.end</span><span class="WHIT">
<span class='line'>2854</span> </span><span class="WHIT">                    </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2855</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2856</span> </span><span class="WHIT">                </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2857</span> </span><span class="WHIT">                    </span><span class="COMM">// undo a change</span><span class="WHIT">
<span class='line'>2858</span> </span><span class="WHIT">                    </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">this.applyChange</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2859</span> </span><span class="WHIT">                    </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">this.applyAdd</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2860</span> 
<span class='line'>2861</span> </span><span class="WHIT">                    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.items</span><span class="PUNC">[</span><span class="NAME">params.itemIndex</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2862</span> </span><span class="WHIT">                        </span><span class="NAME">domItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2863</span> 
<span class='line'>2864</span> </span><span class="WHIT">                    </span><span class="NAME">item.start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">params.itemStart</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2865</span> </span><span class="WHIT">                    </span><span class="NAME">item.end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">params.itemEnd</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2866</span> </span><span class="WHIT">                    </span><span class="NAME">item.group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">params.itemGroup</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2867</span> </span><span class="WHIT">                    </span><span class="COMM">// TODO: original group should be restored too</span><span class="WHIT">
<span class='line'>2868</span> </span><span class="WHIT">                    </span><span class="NAME">item.setPosition</span><span class="PUNC">(</span><span class="NAME">params.itemLeft</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">params.itemRight</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2869</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2870</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2871</span> 
<span class='line'>2872</span> </span><span class="WHIT">            </span><span class="COMM">// prepare data for clustering, by filtering and sorting by type</span><span class="WHIT">
<span class='line'>2873</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.options.cluster</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2874</span> </span><span class="WHIT">                </span><span class="NAME">this.clusterGenerator.updateData</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2875</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2876</span> 
<span class='line'>2877</span> </span><span class="WHIT">            </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2878</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2879</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2880</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2881</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">params.moved</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">!</span><span class="NAME">params.zoomed</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2882</span> </span><span class="WHIT">            </span><span class="COMM">// mouse did not move -> user has selected an item</span><span class="WHIT">
<span class='line'>2883</span> 
<span class='line'>2884</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.target</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="NAME">this.dom.items.deleteButton</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2885</span> </span><span class="WHIT">                </span><span class="COMM">// delete item</span><span class="WHIT">
<span class='line'>2886</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.selection</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2887</span> </span><span class="WHIT">                    </span><span class="NAME">this.confirmDeleteItem</span><span class="PUNC">(</span><span class="NAME">this.selection.index</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2888</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2889</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2890</span> </span><span class="WHIT">            </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.selectable</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2891</span> </span><span class="WHIT">                </span><span class="COMM">// select/unselect item</span><span class="WHIT">
<span class='line'>2892</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.itemIndex</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2893</span> </span><span class="WHIT">                    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">this.isSelected</span><span class="PUNC">(</span><span class="NAME">params.itemIndex</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2894</span> </span><span class="WHIT">                        </span><span class="NAME">this.selectItem</span><span class="PUNC">(</span><span class="NAME">params.itemIndex</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2895</span> </span><span class="WHIT">                        </span><span class="NAME">this.trigger</span><span class="PUNC">(</span><span class="STRN">'select'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2896</span> </span><span class="WHIT">                    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2897</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2898</span> </span><span class="WHIT">                </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2899</span> </span><span class="WHIT">                    </span><span class="NAME">this.unselectItem</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2900</span> </span><span class="WHIT">                    </span><span class="NAME">this.trigger</span><span class="PUNC">(</span><span class="STRN">'select'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2901</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2902</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2903</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2904</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2905</span> </span><span class="WHIT">            </span><span class="COMM">// timeline is moved</span><span class="WHIT">
<span class='line'>2906</span> </span><span class="WHIT">            </span><span class="COMM">// TODO: optimize: no need to reflow and cluster again?</span><span class="WHIT">
<span class='line'>2907</span> </span><span class="WHIT">            </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2908</span> 
<span class='line'>2909</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">(</span><span class="NAME">params.moved</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">options.moveable</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.zoomed</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">options.zoomable</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2910</span> </span><span class="WHIT">                </span><span class="COMM">// fire a rangechanged event</span><span class="WHIT">
<span class='line'>2911</span> </span><span class="WHIT">                </span><span class="NAME">this.trigger</span><span class="PUNC">(</span><span class="STRN">'rangechanged'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2912</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2913</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2914</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2915</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2916</span> 
<span class='line'>2917</span> </span><span class="COMM">/**
<span class='line'>2918</span>  * Double click event occurred for an item
<span class='line'>2919</span>  * @param {Event}  event
<span class='line'>2920</span>  */</span><span class="WHIT">
<span class='line'>2921</span> </span><span class="NAME">links.Timeline.prototype.onDblClick</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2922</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">params</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.eventParams</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2923</span> </span><span class="WHIT">        </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2924</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2925</span> </span><span class="WHIT">        </span><span class="NAME">size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2926</span> </span><span class="WHIT">    </span><span class="NAME">event</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">event</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">window.event</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2927</span> 
<span class='line'>2928</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">params.itemIndex</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2929</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.items</span><span class="PUNC">[</span><span class="NAME">params.itemIndex</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2930</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">this.isEditable</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2931</span> </span><span class="WHIT">            </span><span class="COMM">// fire the edit event</span><span class="WHIT">
<span class='line'>2932</span> </span><span class="WHIT">            </span><span class="NAME">this.trigger</span><span class="PUNC">(</span><span class="STRN">'edit'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2933</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2934</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2935</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2936</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.editable</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2937</span> </span><span class="WHIT">            </span><span class="COMM">// create a new item</span><span class="WHIT">
<span class='line'>2938</span> 
<span class='line'>2939</span> </span><span class="WHIT">            </span><span class="COMM">// get mouse position</span><span class="WHIT">
<span class='line'>2940</span> </span><span class="WHIT">            </span><span class="NAME">params.mouseX</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.getPageX</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2941</span> </span><span class="WHIT">            </span><span class="NAME">params.mouseY</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.getPageY</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2942</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">x</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">params.mouseX</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">links.Timeline.getAbsoluteLeft</span><span class="PUNC">(</span><span class="NAME">dom.content</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2943</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">y</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">params.mouseY</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">links.Timeline.getAbsoluteTop</span><span class="PUNC">(</span><span class="NAME">dom.content</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2944</span> 
<span class='line'>2945</span> </span><span class="WHIT">            </span><span class="COMM">// create a new event at the current mouse position</span><span class="WHIT">
<span class='line'>2946</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">xstart</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.screenToTime</span><span class="PUNC">(</span><span class="NAME">x</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2947</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">xend</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.screenToTime</span><span class="PUNC">(</span><span class="NAME">x</span><span class="WHIT">  </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">size.frameWidth</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// add 10% of timeline width</span><span class="WHIT">
<span class='line'>2948</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.snapEvents</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2949</span> </span><span class="WHIT">                </span><span class="NAME">this.step.snap</span><span class="PUNC">(</span><span class="NAME">xstart</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2950</span> </span><span class="WHIT">                </span><span class="NAME">this.step.snap</span><span class="PUNC">(</span><span class="NAME">xend</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2951</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2952</span> 
<span class='line'>2953</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">content</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"New"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2954</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getGroupFromHeight</span><span class="PUNC">(</span><span class="NAME">y</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">   </span><span class="COMM">// (group may be undefined)</span><span class="WHIT">
<span class='line'>2955</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">preventRender</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2956</span> </span><span class="WHIT">            </span><span class="NAME">this.addItem</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2957</span> </span><span class="WHIT">                </span><span class="STRN">'start'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">xstart</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2958</span> </span><span class="WHIT">                </span><span class="STRN">'end'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">xend</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2959</span> </span><span class="WHIT">                </span><span class="STRN">'content'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">content</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>2960</span> </span><span class="WHIT">                </span><span class="STRN">'group'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">this.getGroupName</span><span class="PUNC">(</span><span class="NAME">group</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>2961</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">preventRender</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2962</span> </span><span class="WHIT">            </span><span class="NAME">params.itemIndex</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.items.length</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2963</span> </span><span class="WHIT">            </span><span class="NAME">this.selectItem</span><span class="PUNC">(</span><span class="NAME">params.itemIndex</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2964</span> 
<span class='line'>2965</span> </span><span class="WHIT">            </span><span class="NAME">this.applyAdd</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2966</span> 
<span class='line'>2967</span> </span><span class="WHIT">            </span><span class="COMM">// fire an add event.</span><span class="WHIT">
<span class='line'>2968</span> </span><span class="WHIT">            </span><span class="COMM">// Note that the change can be canceled from within an event listener if</span><span class="WHIT">
<span class='line'>2969</span> </span><span class="WHIT">            </span><span class="COMM">// this listener calls the method cancelAdd().</span><span class="WHIT">
<span class='line'>2970</span> </span><span class="WHIT">            </span><span class="NAME">this.trigger</span><span class="PUNC">(</span><span class="STRN">'add'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2971</span> 
<span class='line'>2972</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.applyAdd</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2973</span> </span><span class="WHIT">                </span><span class="COMM">// render and select the item</span><span class="WHIT">
<span class='line'>2974</span> </span><span class="WHIT">                </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="NAME">animate</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2975</span> </span><span class="WHIT">                </span><span class="NAME">this.selectItem</span><span class="PUNC">(</span><span class="NAME">params.itemIndex</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2976</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2977</span> </span><span class="WHIT">            </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2978</span> </span><span class="WHIT">                </span><span class="COMM">// undo an add</span><span class="WHIT">
<span class='line'>2979</span> </span><span class="WHIT">                </span><span class="NAME">this.deleteItem</span><span class="PUNC">(</span><span class="NAME">params.itemIndex</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2980</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2981</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2982</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>2983</span> 
<span class='line'>2984</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.preventDefault</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2985</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2986</span> 
<span class='line'>2987</span> 
<span class='line'>2988</span> </span><span class="COMM">/**
<span class='line'>2989</span>  * Event handler for mouse wheel event, used to zoom the timeline
<span class='line'>2990</span>  * Code from http://adomas.org/javascript-mouse-wheel/
<span class='line'>2991</span>  * @param {Event}  event   The event
<span class='line'>2992</span>  */</span><span class="WHIT">
<span class='line'>2993</span> </span><span class="NAME">links.Timeline.prototype.onMouseWheel</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>2994</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">this.options.zoomable</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>2995</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2996</span> 
<span class='line'>2997</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT"> </span><span class="COMM">/* For IE. */</span><span class="WHIT">
<span class='line'>2998</span> </span><span class="WHIT">        </span><span class="NAME">event</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">window.event</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>2999</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3000</span> 
<span class='line'>3001</span> </span><span class="WHIT">    </span><span class="COMM">// retrieve delta    </span><span class="WHIT">
<span class='line'>3002</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">delta</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3003</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event.wheelDelta</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT"> </span><span class="COMM">/* IE/Opera. */</span><span class="WHIT">
<span class='line'>3004</span> </span><span class="WHIT">        </span><span class="NAME">delta</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">event.wheelDelta</span><span class="PUNC">/</span><span class="NUMB">120</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3005</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event.detail</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT"> </span><span class="COMM">/* Mozilla case. */</span><span class="WHIT">
<span class='line'>3006</span> </span><span class="WHIT">        </span><span class="COMM">// In Mozilla, sign of delta is different than in IE.</span><span class="WHIT">
<span class='line'>3007</span> </span><span class="WHIT">        </span><span class="COMM">// Also, delta is multiple of 3.</span><span class="WHIT">
<span class='line'>3008</span> </span><span class="WHIT">        </span><span class="NAME">delta</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NAME">event.detail</span><span class="PUNC">/</span><span class="NUMB">3</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3009</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3010</span> 
<span class='line'>3011</span> </span><span class="WHIT">    </span><span class="COMM">// If delta is nonzero, handle it.</span><span class="WHIT">
<span class='line'>3012</span> </span><span class="WHIT">    </span><span class="COMM">// Basically, delta is now positive if wheel was scrolled up,</span><span class="WHIT">
<span class='line'>3013</span> </span><span class="WHIT">    </span><span class="COMM">// and negative, if wheel was scrolled down.</span><span class="WHIT">
<span class='line'>3014</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">delta</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3015</span> </span><span class="WHIT">        </span><span class="COMM">// TODO: on FireFox, the window is not redrawn within repeated scroll-events </span><span class="WHIT">
<span class='line'>3016</span> </span><span class="WHIT">        </span><span class="COMM">// -> use a delayed redraw? Make a zoom queue?</span><span class="WHIT">
<span class='line'>3017</span> 
<span class='line'>3018</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">timeline</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3019</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">zoom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3020</span> </span><span class="WHIT">            </span><span class="COMM">// perform the zoom action. Delta is normally 1 or -1</span><span class="WHIT">
<span class='line'>3021</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">zoomFactor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">delta</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">5.0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3022</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">frameLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.getAbsoluteLeft</span><span class="PUNC">(</span><span class="NAME">timeline.dom.content</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3023</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">mouseX</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.getPageX</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3024</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">zoomAroundDate</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT">
<span class='line'>3025</span> </span><span class="WHIT">                </span><span class="PUNC">(</span><span class="NAME">mouseX</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">frameLeft</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT">
<span class='line'>3026</span> </span><span class="WHIT">                    </span><span class="NAME">timeline.screenToTime</span><span class="PUNC">(</span><span class="NAME">mouseX</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">frameLeft</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>3027</span> </span><span class="WHIT">                    </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3028</span> 
<span class='line'>3029</span> </span><span class="WHIT">            </span><span class="NAME">timeline.zoom</span><span class="PUNC">(</span><span class="NAME">zoomFactor</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">zoomAroundDate</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3030</span> 
<span class='line'>3031</span> </span><span class="WHIT">            </span><span class="COMM">// fire a rangechange and a rangechanged event</span><span class="WHIT">
<span class='line'>3032</span> </span><span class="WHIT">            </span><span class="NAME">timeline.trigger</span><span class="PUNC">(</span><span class="STRN">"rangechange"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3033</span> </span><span class="WHIT">            </span><span class="NAME">timeline.trigger</span><span class="PUNC">(</span><span class="STRN">"rangechanged"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3034</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3035</span> 
<span class='line'>3036</span> </span><span class="WHIT">        </span><span class="NAME">zoom</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3037</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3038</span> 
<span class='line'>3039</span> </span><span class="WHIT">    </span><span class="COMM">// Prevent default actions caused by mouse wheel.</span><span class="WHIT">
<span class='line'>3040</span> </span><span class="WHIT">    </span><span class="COMM">// That might be ugly, but we handle scrolls somehow</span><span class="WHIT">
<span class='line'>3041</span> </span><span class="WHIT">    </span><span class="COMM">// anyway, so don't bother here...</span><span class="WHIT">
<span class='line'>3042</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.preventDefault</span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3043</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3044</span> 
<span class='line'>3045</span> 
<span class='line'>3046</span> </span><span class="COMM">/**
<span class='line'>3047</span>  * Zoom the timeline the given zoomfactor in or out. Start and end date will
<span class='line'>3048</span>  * be adjusted, and the timeline will be redrawn. You can optionally give a
<span class='line'>3049</span>  * date around which to zoom.
<span class='line'>3050</span>  * For example, try zoomfactor = 0.1 or -0.1
<span class='line'>3051</span>  * @param {Number} zoomFactor      Zooming amount. Positive value will zoom in,
<span class='line'>3052</span>  *                                 negative value will zoom out
<span class='line'>3053</span>  * @param {Date}   zoomAroundDate  Date around which will be zoomed. Optional
<span class='line'>3054</span>  */</span><span class="WHIT">
<span class='line'>3055</span> </span><span class="NAME">links.Timeline.prototype.zoom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">zoomFactor</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">zoomAroundDate</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3056</span> </span><span class="WHIT">    </span><span class="COMM">// if zoomAroundDate is not provided, take it half between start Date and end Date</span><span class="WHIT">
<span class='line'>3057</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">zoomAroundDate</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3058</span> </span><span class="WHIT">        </span><span class="NAME">zoomAroundDate</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="PUNC">(</span><span class="NAME">this.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3059</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3060</span> 
<span class='line'>3061</span> </span><span class="WHIT">    </span><span class="COMM">// prevent zoom factor larger than 1 or smaller than -1 (larger than 1 will</span><span class="WHIT">
<span class='line'>3062</span> </span><span class="WHIT">    </span><span class="COMM">// result in a start>=end )</span><span class="WHIT">
<span class='line'>3063</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">zoomFactor</span><span class="WHIT"> </span><span class="PUNC">>=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3064</span> </span><span class="WHIT">        </span><span class="NAME">zoomFactor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0.9</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3065</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3066</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">zoomFactor</span><span class="WHIT"> </span><span class="PUNC">&lt;=</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3067</span> </span><span class="WHIT">        </span><span class="NAME">zoomFactor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">0.9</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3068</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3069</span> 
<span class='line'>3070</span> </span><span class="WHIT">    </span><span class="COMM">// adjust a negative factor such that zooming in with 0.1 equals zooming</span><span class="WHIT">
<span class='line'>3071</span> </span><span class="WHIT">    </span><span class="COMM">// out with a factor -0.1</span><span class="WHIT">
<span class='line'>3072</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">zoomFactor</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3073</span> </span><span class="WHIT">        </span><span class="NAME">zoomFactor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">zoomFactor</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NUMB">1</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">zoomFactor</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3074</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3075</span> 
<span class='line'>3076</span> </span><span class="WHIT">    </span><span class="COMM">// zoom start Date and end Date relative to the zoomAroundDate</span><span class="WHIT">
<span class='line'>3077</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">startDiff</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">zoomAroundDate</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3078</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">endDiff</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">zoomAroundDate</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3079</span> 
<span class='line'>3080</span> </span><span class="WHIT">    </span><span class="COMM">// calculate new dates</span><span class="WHIT">
<span class='line'>3081</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">newStart</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">startDiff</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">zoomFactor</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3082</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">newEnd</span><span class="WHIT">   </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">endDiff</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">zoomFactor</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3083</span> 
<span class='line'>3084</span> </span><span class="WHIT">    </span><span class="COMM">// only zoom in when interval is larger than minimum interval (to prevent</span><span class="WHIT">
<span class='line'>3085</span> </span><span class="WHIT">    </span><span class="COMM">// sliding to left/right when having reached the minimum zoom level)</span><span class="WHIT">
<span class='line'>3086</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">interval</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">newEnd.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">newStart.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3087</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">intervalMin</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Number</span><span class="PUNC">(</span><span class="NAME">this.options.intervalMin</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3088</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">intervalMin</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3089</span> </span><span class="WHIT">        </span><span class="NAME">intervalMin</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3090</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3091</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">interval</span><span class="WHIT"> </span><span class="PUNC">>=</span><span class="WHIT"> </span><span class="NAME">intervalMin</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3092</span> </span><span class="WHIT">        </span><span class="NAME">this.applyRange</span><span class="PUNC">(</span><span class="NAME">newStart</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">newEnd</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">zoomAroundDate</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3093</span> </span><span class="WHIT">        </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3094</span> </span><span class="WHIT">            </span><span class="NAME">animate</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">this.options.animate</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">this.options.animateZoom</span><span class="WHIT">
<span class='line'>3095</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3096</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3097</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3098</span> 
<span class='line'>3099</span> </span><span class="COMM">/**
<span class='line'>3100</span>  * Move the timeline the given movefactor to the left or right. Start and end
<span class='line'>3101</span>  * date will be adjusted, and the timeline will be redrawn.
<span class='line'>3102</span>  * For example, try moveFactor = 0.1 or -0.1
<span class='line'>3103</span>  * @param {Number}  moveFactor      Moving amount. Positive value will move right,
<span class='line'>3104</span>  *                                 negative value will move left
<span class='line'>3105</span>  */</span><span class="WHIT">
<span class='line'>3106</span> </span><span class="NAME">links.Timeline.prototype.move</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">moveFactor</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3107</span> </span><span class="WHIT">    </span><span class="COMM">// zoom start Date and end Date relative to the zoomAroundDate</span><span class="WHIT">
<span class='line'>3108</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3109</span> 
<span class='line'>3110</span> </span><span class="WHIT">    </span><span class="COMM">// apply new dates</span><span class="WHIT">
<span class='line'>3111</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">newStart</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">moveFactor</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3112</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">newEnd</span><span class="WHIT">   </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">moveFactor</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3113</span> </span><span class="WHIT">    </span><span class="NAME">this.applyRange</span><span class="PUNC">(</span><span class="NAME">newStart</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">newEnd</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3114</span> 
<span class='line'>3115</span> </span><span class="WHIT">    </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// TODO: optimize, no need to reflow, only to recalc conversion and repaint</span><span class="WHIT">
<span class='line'>3116</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3117</span> 
<span class='line'>3118</span> </span><span class="COMM">/**
<span class='line'>3119</span>  * Apply a visible range. The range is limited to feasible maximum and minimum
<span class='line'>3120</span>  * range.
<span class='line'>3121</span>  * @param {Date} start
<span class='line'>3122</span>  * @param {Date} end
<span class='line'>3123</span>  * @param {Date}   zoomAroundDate  Optional. Date around which will be zoomed.
<span class='line'>3124</span>  */</span><span class="WHIT">
<span class='line'>3125</span> </span><span class="NAME">links.Timeline.prototype.applyRange</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">start</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">zoomAroundDate</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3126</span> </span><span class="WHIT">    </span><span class="COMM">// calculate new start and end value</span><span class="WHIT">
<span class='line'>3127</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">startValue</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// number</span><span class="WHIT">
<span class='line'>3128</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">endValue</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">     </span><span class="COMM">// number</span><span class="WHIT">
<span class='line'>3129</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">interval</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">endValue</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">startValue</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3130</span> 
<span class='line'>3131</span> </span><span class="WHIT">    </span><span class="COMM">// determine maximum and minimum interval</span><span class="WHIT">
<span class='line'>3132</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3133</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">year</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1000</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">24</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">365</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3134</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">intervalMin</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Number</span><span class="PUNC">(</span><span class="NAME">options.intervalMin</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3135</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">intervalMin</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3136</span> </span><span class="WHIT">        </span><span class="NAME">intervalMin</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3137</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3138</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">intervalMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Number</span><span class="PUNC">(</span><span class="NAME">options.intervalMax</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NUMB">10000</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">year</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3139</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">intervalMax</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NUMB">10000</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">year</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3140</span> </span><span class="WHIT">        </span><span class="NAME">intervalMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">10000</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">year</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3141</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3142</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">intervalMax</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">intervalMin</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3143</span> </span><span class="WHIT">        </span><span class="NAME">intervalMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">intervalMin</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3144</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3145</span> 
<span class='line'>3146</span> </span><span class="WHIT">    </span><span class="COMM">// determine min and max date value</span><span class="WHIT">
<span class='line'>3147</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.min</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">options.min.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// number</span><span class="WHIT">
<span class='line'>3148</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.max</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">options.max.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// number</span><span class="WHIT">
<span class='line'>3149</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3150</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">>=</span><span class="WHIT"> </span><span class="NAME">max</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3151</span> </span><span class="WHIT">            </span><span class="COMM">// empty range</span><span class="WHIT">
<span class='line'>3152</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">day</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1000</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">24</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3153</span> </span><span class="WHIT">            </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">day</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3154</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3155</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">intervalMax</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">min</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3156</span> </span><span class="WHIT">            </span><span class="NAME">intervalMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">min</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3157</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3158</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">intervalMin</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">min</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3159</span> </span><span class="WHIT">            </span><span class="NAME">intervalMin</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">min</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3160</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3161</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3162</span> 
<span class='line'>3163</span> </span><span class="WHIT">    </span><span class="COMM">// prevent empty interval</span><span class="WHIT">
<span class='line'>3164</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">startValue</span><span class="WHIT"> </span><span class="PUNC">>=</span><span class="WHIT"> </span><span class="NAME">endValue</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3165</span> </span><span class="WHIT">        </span><span class="NAME">endValue</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1000</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">24</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3166</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3167</span> 
<span class='line'>3168</span> </span><span class="WHIT">    </span><span class="COMM">// prevent too small scale</span><span class="WHIT">
<span class='line'>3169</span> </span><span class="WHIT">    </span><span class="COMM">// TODO: IE has problems with milliseconds</span><span class="WHIT">
<span class='line'>3170</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">interval</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">intervalMin</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3171</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">intervalMin</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">interval</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3172</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">f</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">zoomAroundDate</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">zoomAroundDate.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">startValue</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">interval</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0.5</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3173</span> </span><span class="WHIT">        </span><span class="NAME">startValue</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">f</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3174</span> </span><span class="WHIT">        </span><span class="NAME">endValue</span><span class="WHIT">   </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NUMB">1</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">f</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3175</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3176</span> 
<span class='line'>3177</span> </span><span class="WHIT">    </span><span class="COMM">// prevent too large scale</span><span class="WHIT">
<span class='line'>3178</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">interval</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">intervalMax</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3179</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">interval</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">intervalMax</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3180</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">f</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">zoomAroundDate</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">zoomAroundDate.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">startValue</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">interval</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0.5</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3181</span> </span><span class="WHIT">        </span><span class="NAME">startValue</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">f</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3182</span> </span><span class="WHIT">        </span><span class="NAME">endValue</span><span class="WHIT">   </span><span class="PUNC">-</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NUMB">1</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">f</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3183</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3184</span> 
<span class='line'>3185</span> </span><span class="WHIT">    </span><span class="COMM">// prevent to small start date</span><span class="WHIT">
<span class='line'>3186</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3187</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">startValue</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">min</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3188</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3189</span> </span><span class="WHIT">            </span><span class="NAME">startValue</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3190</span> </span><span class="WHIT">            </span><span class="NAME">endValue</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3191</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3192</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3193</span> 
<span class='line'>3194</span> </span><span class="WHIT">    </span><span class="COMM">// prevent to large end date</span><span class="WHIT">
<span class='line'>3195</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3196</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">endValue</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3197</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3198</span> </span><span class="WHIT">            </span><span class="NAME">startValue</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3199</span> </span><span class="WHIT">            </span><span class="NAME">endValue</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3200</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3201</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3202</span> 
<span class='line'>3203</span> </span><span class="WHIT">    </span><span class="COMM">// apply new dates</span><span class="WHIT">
<span class='line'>3204</span> </span><span class="WHIT">    </span><span class="NAME">this.start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">startValue</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3205</span> </span><span class="WHIT">    </span><span class="NAME">this.end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">endValue</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3206</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3207</span> 
<span class='line'>3208</span> </span><span class="COMM">/**
<span class='line'>3209</span>  * Delete an item after a confirmation.
<span class='line'>3210</span>  * The deletion can be cancelled by executing .cancelDelete() during the
<span class='line'>3211</span>  * triggered event 'delete'.
<span class='line'>3212</span>  * @param {int} index   Index of the item to be deleted
<span class='line'>3213</span>  */</span><span class="WHIT">
<span class='line'>3214</span> </span><span class="NAME">links.Timeline.prototype.confirmDeleteItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3215</span> </span><span class="WHIT">    </span><span class="NAME">this.applyDelete</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3216</span> 
<span class='line'>3217</span> </span><span class="WHIT">    </span><span class="COMM">// select the event to be deleted</span><span class="WHIT">
<span class='line'>3218</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">this.isSelected</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3219</span> </span><span class="WHIT">        </span><span class="NAME">this.selectItem</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3220</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3221</span> 
<span class='line'>3222</span> </span><span class="WHIT">    </span><span class="COMM">// fire a delete event trigger. </span><span class="WHIT">
<span class='line'>3223</span> </span><span class="WHIT">    </span><span class="COMM">// Note that the delete event can be canceled from within an event listener if </span><span class="WHIT">
<span class='line'>3224</span> </span><span class="WHIT">    </span><span class="COMM">// this listener calls the method cancelChange().</span><span class="WHIT">
<span class='line'>3225</span> </span><span class="WHIT">    </span><span class="NAME">this.trigger</span><span class="PUNC">(</span><span class="STRN">'delete'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3226</span> 
<span class='line'>3227</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.applyDelete</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3228</span> </span><span class="WHIT">        </span><span class="NAME">this.deleteItem</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3229</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3230</span> 
<span class='line'>3231</span> </span><span class="WHIT">    </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">this.applyDelete</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3232</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3233</span> 
<span class='line'>3234</span> </span><span class="COMM">/**
<span class='line'>3235</span>  * Delete an item
<span class='line'>3236</span>  * @param {int} index   Index of the item to be deleted
<span class='line'>3237</span>  * @param {boolean} [preventRender=false]   Do not re-render timeline if true
<span class='line'>3238</span>  *                                          (optimization for multiple delete)
<span class='line'>3239</span>  */</span><span class="WHIT">
<span class='line'>3240</span> </span><span class="NAME">links.Timeline.prototype.deleteItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">preventRender</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3241</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">>=</span><span class="WHIT"> </span><span class="NAME">this.items.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3242</span> </span><span class="WHIT">        </span><span class="KEYW">throw</span><span class="WHIT"> </span><span class="STRN">"Cannot delete row, index out of range"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3243</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3244</span> 
<span class='line'>3245</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.selection</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3246</span> </span><span class="WHIT">        </span><span class="COMM">// adjust the selection</span><span class="WHIT">
<span class='line'>3247</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.selection.index</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">index</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3248</span> </span><span class="WHIT">            </span><span class="COMM">// item to be deleted is selected</span><span class="WHIT">
<span class='line'>3249</span> </span><span class="WHIT">            </span><span class="NAME">this.unselectItem</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3250</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3251</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.selection.index</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">index</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3252</span> </span><span class="WHIT">            </span><span class="COMM">// update selection index</span><span class="WHIT">
<span class='line'>3253</span> </span><span class="WHIT">            </span><span class="NAME">this.selection.index</span><span class="PUNC">--</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3254</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3255</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3256</span> 
<span class='line'>3257</span> </span><span class="WHIT">    </span><span class="COMM">// actually delete the item and remove it from the DOM</span><span class="WHIT">
<span class='line'>3258</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.items.splice</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3259</span> </span><span class="WHIT">    </span><span class="NAME">this.renderQueue.hide.push</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3260</span> 
<span class='line'>3261</span> </span><span class="WHIT">    </span><span class="COMM">// delete the row in the original data table</span><span class="WHIT">
<span class='line'>3262</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.data</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3263</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">google</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">google.visualization</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT">
<span class='line'>3264</span> </span><span class="WHIT">            </span><span class="NAME">this.data</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">google.visualization.DataTable</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3265</span> </span><span class="WHIT">            </span><span class="NAME">this.data.removeRow</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3266</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3267</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">links.Timeline.isArray</span><span class="PUNC">(</span><span class="NAME">this.data</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3268</span> </span><span class="WHIT">            </span><span class="NAME">this.data.splice</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3269</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3270</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3271</span> </span><span class="WHIT">            </span><span class="KEYW">throw</span><span class="WHIT"> </span><span class="STRN">"Cannot delete row from data, unknown data type"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3272</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3273</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3274</span> 
<span class='line'>3275</span> </span><span class="WHIT">    </span><span class="COMM">// prepare data for clustering, by filtering and sorting by type</span><span class="WHIT">
<span class='line'>3276</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.options.cluster</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3277</span> </span><span class="WHIT">        </span><span class="NAME">this.clusterGenerator.updateData</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3278</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3279</span> 
<span class='line'>3280</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">preventRender</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3281</span> </span><span class="WHIT">        </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3282</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3283</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3284</span> 
<span class='line'>3285</span> 
<span class='line'>3286</span> </span><span class="COMM">/**
<span class='line'>3287</span>  * Delete all items
<span class='line'>3288</span>  */</span><span class="WHIT">
<span class='line'>3289</span> </span><span class="NAME">links.Timeline.prototype.deleteAllItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3290</span> </span><span class="WHIT">    </span><span class="NAME">this.unselectItem</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3291</span> 
<span class='line'>3292</span> </span><span class="WHIT">    </span><span class="COMM">// delete the loaded items</span><span class="WHIT">
<span class='line'>3293</span> </span><span class="WHIT">    </span><span class="NAME">this.clearItems</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3294</span> 
<span class='line'>3295</span> </span><span class="WHIT">    </span><span class="COMM">// delete the groups</span><span class="WHIT">
<span class='line'>3296</span> </span><span class="WHIT">    </span><span class="NAME">this.deleteGroups</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3297</span> 
<span class='line'>3298</span> </span><span class="WHIT">    </span><span class="COMM">// empty original data table</span><span class="WHIT">
<span class='line'>3299</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.data</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3300</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">google</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">google.visualization</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT">
<span class='line'>3301</span> </span><span class="WHIT">            </span><span class="NAME">this.data</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">google.visualization.DataTable</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3302</span> </span><span class="WHIT">            </span><span class="NAME">this.data.removeRows</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">this.data.getNumberOfRows</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3303</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3304</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">links.Timeline.isArray</span><span class="PUNC">(</span><span class="NAME">this.data</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3305</span> </span><span class="WHIT">            </span><span class="NAME">this.data.splice</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">this.data.length</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3306</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3307</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3308</span> </span><span class="WHIT">            </span><span class="KEYW">throw</span><span class="WHIT"> </span><span class="STRN">"Cannot delete row from data, unknown data type"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3309</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3310</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3311</span> 
<span class='line'>3312</span> </span><span class="WHIT">    </span><span class="COMM">// prepare data for clustering, by filtering and sorting by type</span><span class="WHIT">
<span class='line'>3313</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.options.cluster</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3314</span> </span><span class="WHIT">        </span><span class="NAME">this.clusterGenerator.updateData</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3315</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3316</span> 
<span class='line'>3317</span> </span><span class="WHIT">    </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3318</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3319</span> 
<span class='line'>3320</span> 
<span class='line'>3321</span> </span><span class="COMM">/**
<span class='line'>3322</span>  * Find the group from a given height in the timeline
<span class='line'>3323</span>  * @param {Number} height   Height in the timeline
<span class='line'>3324</span>  * @return {Object | undefined} group   The group object, or undefined if out
<span class='line'>3325</span>  *                                      of range
<span class='line'>3326</span>  */</span><span class="WHIT">
<span class='line'>3327</span> </span><span class="NAME">links.Timeline.prototype.getGroupFromHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">height</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3328</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>3329</span> </span><span class="WHIT">        </span><span class="NAME">group</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>3330</span> </span><span class="WHIT">        </span><span class="NAME">groups</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.groups</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3331</span> 
<span class='line'>3332</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">groups.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3333</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.options.axisOnTop</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3334</span> </span><span class="WHIT">            </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups.length</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">>=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">--</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3335</span> </span><span class="WHIT">                </span><span class="NAME">group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3336</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">group.top</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3337</span> </span><span class="WHIT">                    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">group</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3338</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3339</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3340</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3341</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3342</span> </span><span class="WHIT">            </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">groups.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3343</span> </span><span class="WHIT">                </span><span class="NAME">group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3344</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">group.top</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3345</span> </span><span class="WHIT">                    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">group</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3346</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3347</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3348</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3349</span> 
<span class='line'>3350</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">group</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// return the last group</span><span class="WHIT">
<span class='line'>3351</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3352</span> 
<span class='line'>3353</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3354</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3355</span> 
<span class='line'>3356</span> </span><span class="COMM">/**
<span class='line'>3357</span>  * @constructor links.Timeline.Item
<span class='line'>3358</span>  * @param {Object} data       Object containing parameters start, end
<span class='line'>3359</span>  *                            content, group. type, group.
<span class='line'>3360</span>  * @param {Object} [options]  Options to set initial property values
<span class='line'>3361</span>  *                                {Number} top
<span class='line'>3362</span>  *                                {Number} left
<span class='line'>3363</span>  *                                {Number} width
<span class='line'>3364</span>  *                                {Number} height
<span class='line'>3365</span>  */</span><span class="WHIT">
<span class='line'>3366</span> </span><span class="NAME">links.Timeline.Item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">data</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">options</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3367</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">data</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3368</span> </span><span class="WHIT">        </span><span class="COMM">/* TODO: use parseJSONDate as soon as it is tested and working (in two directions)
<span class='line'>3369</span>          this.start = links.Timeline.parseJSONDate(data.start);
<span class='line'>3370</span>          this.end = links.Timeline.parseJSONDate(data.end);
<span class='line'>3371</span>          */</span><span class="WHIT">
<span class='line'>3372</span> </span><span class="WHIT">        </span><span class="NAME">this.start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">data.start</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3373</span> </span><span class="WHIT">        </span><span class="NAME">this.end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">data.end</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3374</span> </span><span class="WHIT">        </span><span class="NAME">this.content</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">data.content</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3375</span> </span><span class="WHIT">        </span><span class="NAME">this.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">data.className</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3376</span> </span><span class="WHIT">        </span><span class="NAME">this.editable</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">data.editable</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3377</span> </span><span class="WHIT">        </span><span class="NAME">this.group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">data.group</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3378</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3379</span> </span><span class="WHIT">    </span><span class="NAME">this.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3380</span> </span><span class="WHIT">    </span><span class="NAME">this.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3381</span> </span><span class="WHIT">    </span><span class="NAME">this.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3382</span> </span><span class="WHIT">    </span><span class="NAME">this.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3383</span> </span><span class="WHIT">    </span><span class="NAME">this.lineWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3384</span> </span><span class="WHIT">    </span><span class="NAME">this.dotWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3385</span> </span><span class="WHIT">    </span><span class="NAME">this.dotHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3386</span> 
<span class='line'>3387</span> </span><span class="WHIT">    </span><span class="NAME">this.rendered</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// true when the item is draw in the Timeline DOM</span><span class="WHIT">
<span class='line'>3388</span> 
<span class='line'>3389</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3390</span> </span><span class="WHIT">        </span><span class="COMM">// override the default properties</span><span class="WHIT">
<span class='line'>3391</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">option</span><span class="WHIT"> </span><span class="KEYW">in</span><span class="WHIT"> </span><span class="NAME">options</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3392</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.hasOwnProperty</span><span class="PUNC">(</span><span class="NAME">option</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3393</span> </span><span class="WHIT">                </span><span class="KEYW">this</span><span class="PUNC">[</span><span class="NAME">option</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options</span><span class="PUNC">[</span><span class="NAME">option</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3394</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3395</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3396</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3397</span> 
<span class='line'>3398</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3399</span> 
<span class='line'>3400</span> 
<span class='line'>3401</span> 
<span class='line'>3402</span> </span><span class="COMM">/**
<span class='line'>3403</span>  * Reflow the Item: retrieve its actual size from the DOM
<span class='line'>3404</span>  * @return {boolean} resized    returns true if the axis is resized
<span class='line'>3405</span>  */</span><span class="WHIT">
<span class='line'>3406</span> </span><span class="NAME">links.Timeline.Item.prototype.reflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3407</span> </span><span class="WHIT">    </span><span class="COMM">// Should be implemented by sub-prototype</span><span class="WHIT">
<span class='line'>3408</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3409</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3410</span> 
<span class='line'>3411</span> </span><span class="COMM">/**
<span class='line'>3412</span>  * Append all image urls present in the items DOM to the provided array
<span class='line'>3413</span>  * @param {String[]} imageUrls
<span class='line'>3414</span>  */</span><span class="WHIT">
<span class='line'>3415</span> </span><span class="NAME">links.Timeline.Item.prototype.getImageUrls</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">imageUrls</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3416</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.dom</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3417</span> </span><span class="WHIT">        </span><span class="NAME">links.imageloader.filterImageUrls</span><span class="PUNC">(</span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">imageUrls</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3418</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3419</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3420</span> 
<span class='line'>3421</span> </span><span class="COMM">/**
<span class='line'>3422</span>  * Select the item
<span class='line'>3423</span>  */</span><span class="WHIT">
<span class='line'>3424</span> </span><span class="NAME">links.Timeline.Item.prototype.select</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3425</span> </span><span class="WHIT">    </span><span class="COMM">// Should be implemented by sub-prototype</span><span class="WHIT">
<span class='line'>3426</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3427</span> 
<span class='line'>3428</span> </span><span class="COMM">/**
<span class='line'>3429</span>  * Unselect the item
<span class='line'>3430</span>  */</span><span class="WHIT">
<span class='line'>3431</span> </span><span class="NAME">links.Timeline.Item.prototype.unselect</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3432</span> </span><span class="WHIT">    </span><span class="COMM">// Should be implemented by sub-prototype</span><span class="WHIT">
<span class='line'>3433</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3434</span> 
<span class='line'>3435</span> </span><span class="COMM">/**
<span class='line'>3436</span>  * Creates the DOM for the item, depending on its type
<span class='line'>3437</span>  * @return {Element | undefined}
<span class='line'>3438</span>  */</span><span class="WHIT">
<span class='line'>3439</span> </span><span class="NAME">links.Timeline.Item.prototype.createDOM</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3440</span> </span><span class="WHIT">    </span><span class="COMM">// Should be implemented by sub-prototype</span><span class="WHIT">
<span class='line'>3441</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3442</span> 
<span class='line'>3443</span> </span><span class="COMM">/**
<span class='line'>3444</span>  * Append the items DOM to the given HTML container. If items DOM does not yet
<span class='line'>3445</span>  * exist, it will be created first.
<span class='line'>3446</span>  * @param {Element} container
<span class='line'>3447</span>  */</span><span class="WHIT">
<span class='line'>3448</span> </span><span class="NAME">links.Timeline.Item.prototype.showDOM</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">container</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3449</span> </span><span class="WHIT">    </span><span class="COMM">// Should be implemented by sub-prototype</span><span class="WHIT">
<span class='line'>3450</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3451</span> 
<span class='line'>3452</span> </span><span class="COMM">/**
<span class='line'>3453</span>  * Remove the items DOM from the current HTML container
<span class='line'>3454</span>  * @param {Element} container
<span class='line'>3455</span>  */</span><span class="WHIT">
<span class='line'>3456</span> </span><span class="NAME">links.Timeline.Item.prototype.hideDOM</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">container</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3457</span> </span><span class="WHIT">    </span><span class="COMM">// Should be implemented by sub-prototype</span><span class="WHIT">
<span class='line'>3458</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3459</span> 
<span class='line'>3460</span> </span><span class="COMM">/**
<span class='line'>3461</span>  * Update the DOM of the item. This will update the content and the classes
<span class='line'>3462</span>  * of the item
<span class='line'>3463</span>  */</span><span class="WHIT">
<span class='line'>3464</span> </span><span class="NAME">links.Timeline.Item.prototype.updateDOM</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3465</span> </span><span class="WHIT">    </span><span class="COMM">// Should be implemented by sub-prototype</span><span class="WHIT">
<span class='line'>3466</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3467</span> 
<span class='line'>3468</span> </span><span class="COMM">/**
<span class='line'>3469</span>  * Reposition the item, recalculate its left, top, and width, using the current
<span class='line'>3470</span>  * range of the timeline and the timeline options.
<span class='line'>3471</span>  * @param {links.Timeline} timeline
<span class='line'>3472</span>  */</span><span class="WHIT">
<span class='line'>3473</span> </span><span class="NAME">links.Timeline.Item.prototype.updatePosition</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">timeline</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3474</span> </span><span class="WHIT">    </span><span class="COMM">// Should be implemented by sub-prototype</span><span class="WHIT">
<span class='line'>3475</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3476</span> 
<span class='line'>3477</span> </span><span class="COMM">/**
<span class='line'>3478</span>  * Check if the item is drawn in the timeline (i.e. the DOM of the item is
<span class='line'>3479</span>  * attached to the frame. You may also just request the parameter item.rendered
<span class='line'>3480</span>  * @return {boolean} rendered
<span class='line'>3481</span>  */</span><span class="WHIT">
<span class='line'>3482</span> </span><span class="NAME">links.Timeline.Item.prototype.isRendered</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3483</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">this.rendered</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3484</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3485</span> 
<span class='line'>3486</span> </span><span class="COMM">/**
<span class='line'>3487</span>  * Check if the item is located in the visible area of the timeline, and
<span class='line'>3488</span>  * not part of a cluster
<span class='line'>3489</span>  * @param {Date} start
<span class='line'>3490</span>  * @param {Date} end
<span class='line'>3491</span>  * @return {boolean} visible
<span class='line'>3492</span>  */</span><span class="WHIT">
<span class='line'>3493</span> </span><span class="NAME">links.Timeline.Item.prototype.isVisible</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">start</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3494</span> </span><span class="WHIT">    </span><span class="COMM">// Should be implemented by sub-prototype</span><span class="WHIT">
<span class='line'>3495</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3496</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3497</span> 
<span class='line'>3498</span> </span><span class="COMM">/**
<span class='line'>3499</span>  * Reposition the item
<span class='line'>3500</span>  * @param {Number} left
<span class='line'>3501</span>  * @param {Number} right
<span class='line'>3502</span>  */</span><span class="WHIT">
<span class='line'>3503</span> </span><span class="NAME">links.Timeline.Item.prototype.setPosition</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">right</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3504</span> </span><span class="WHIT">    </span><span class="COMM">// Should be implemented by sub-prototype</span><span class="WHIT">
<span class='line'>3505</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3506</span> 
<span class='line'>3507</span> </span><span class="COMM">/**
<span class='line'>3508</span>  * Calculate the right position of the item
<span class='line'>3509</span>  * @param {links.Timeline} timeline
<span class='line'>3510</span>  * @return {Number} right
<span class='line'>3511</span>  */</span><span class="WHIT">
<span class='line'>3512</span> </span><span class="NAME">links.Timeline.Item.prototype.getRight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">timeline</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3513</span> </span><span class="WHIT">    </span><span class="COMM">// Should be implemented by sub-prototype</span><span class="WHIT">
<span class='line'>3514</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3515</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3516</span> 
<span class='line'>3517</span> </span><span class="COMM">/**
<span class='line'>3518</span>  * Calculate the width of the item
<span class='line'>3519</span>  * @param {links.Timeline} timeline
<span class='line'>3520</span>  * @return {Number} width
<span class='line'>3521</span>  */</span><span class="WHIT">
<span class='line'>3522</span> </span><span class="NAME">links.Timeline.Item.prototype.getWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">timeline</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3523</span> </span><span class="WHIT">    </span><span class="COMM">// Should be implemented by sub-prototype</span><span class="WHIT">
<span class='line'>3524</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">this.width</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// last rendered width</span><span class="WHIT">
<span class='line'>3525</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3526</span> 
<span class='line'>3527</span> 
<span class='line'>3528</span> </span><span class="COMM">/**
<span class='line'>3529</span>  * @constructor links.Timeline.ItemBox
<span class='line'>3530</span>  * @extends links.Timeline.Item
<span class='line'>3531</span>  * @param {Object} data       Object containing parameters start, end
<span class='line'>3532</span>  *                            content, group. type, group.
<span class='line'>3533</span>  * @param {Object} [options]  Options to set initial property values
<span class='line'>3534</span>  *                                {Number} top
<span class='line'>3535</span>  *                                {Number} left
<span class='line'>3536</span>  *                                {Number} width
<span class='line'>3537</span>  *                                {Number} height
<span class='line'>3538</span>  */</span><span class="WHIT">
<span class='line'>3539</span> </span><span class="NAME">links.Timeline.ItemBox</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">data</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">options</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3540</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.Item.call</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">data</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">options</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3541</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3542</span> 
<span class='line'>3543</span> </span><span class="NAME">links.Timeline.ItemBox.prototype</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">links.Timeline.Item</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3544</span> 
<span class='line'>3545</span> </span><span class="COMM">/**
<span class='line'>3546</span>  * Reflow the Item: retrieve its actual size from the DOM
<span class='line'>3547</span>  * @return {boolean} resized    returns true if the axis is resized
<span class='line'>3548</span>  * @override
<span class='line'>3549</span>  */</span><span class="WHIT">
<span class='line'>3550</span> </span><span class="NAME">links.Timeline.ItemBox.prototype.reflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3551</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>3552</span> </span><span class="WHIT">        </span><span class="NAME">dotHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.dot.offsetHeight</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>3553</span> </span><span class="WHIT">        </span><span class="NAME">dotWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.dot.offsetWidth</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>3554</span> </span><span class="WHIT">        </span><span class="NAME">lineWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.line.offsetWidth</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>3555</span> </span><span class="WHIT">        </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="WHIT">
<span class='line'>3556</span> </span><span class="WHIT">            </span><span class="PUNC">(</span><span class="NAME">this.dotHeight</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">dotHeight</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT">
<span class='line'>3557</span> </span><span class="WHIT">                </span><span class="PUNC">(</span><span class="NAME">this.dotWidth</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">dotWidth</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT">
<span class='line'>3558</span> </span><span class="WHIT">                </span><span class="PUNC">(</span><span class="NAME">this.lineWidth</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">lineWidth</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>3559</span> </span><span class="WHIT">            </span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3560</span> 
<span class='line'>3561</span> </span><span class="WHIT">    </span><span class="NAME">this.dotHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dotHeight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3562</span> </span><span class="WHIT">    </span><span class="NAME">this.dotWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dotWidth</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3563</span> </span><span class="WHIT">    </span><span class="NAME">this.lineWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">lineWidth</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3564</span> 
<span class='line'>3565</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3566</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3567</span> 
<span class='line'>3568</span> </span><span class="COMM">/**
<span class='line'>3569</span>  * Select the item
<span class='line'>3570</span>  * @override
<span class='line'>3571</span>  */</span><span class="WHIT">
<span class='line'>3572</span> </span><span class="NAME">links.Timeline.ItemBox.prototype.select</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3573</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3574</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.addClassName</span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'timeline-event-selected'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3575</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.addClassName</span><span class="PUNC">(</span><span class="NAME">dom.line</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'timeline-event-selected'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3576</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.addClassName</span><span class="PUNC">(</span><span class="NAME">dom.dot</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'timeline-event-selected'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3577</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3578</span> 
<span class='line'>3579</span> </span><span class="COMM">/**
<span class='line'>3580</span>  * Unselect the item
<span class='line'>3581</span>  * @override
<span class='line'>3582</span>  */</span><span class="WHIT">
<span class='line'>3583</span> </span><span class="NAME">links.Timeline.ItemBox.prototype.unselect</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3584</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3585</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.removeClassName</span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'timeline-event-selected'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3586</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.removeClassName</span><span class="PUNC">(</span><span class="NAME">dom.line</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'timeline-event-selected'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3587</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.removeClassName</span><span class="PUNC">(</span><span class="NAME">dom.dot</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'timeline-event-selected'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3588</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3589</span> 
<span class='line'>3590</span> </span><span class="COMM">/**
<span class='line'>3591</span>  * Creates the DOM for the item, depending on its type
<span class='line'>3592</span>  * @return {Element | undefined}
<span class='line'>3593</span>  * @override
<span class='line'>3594</span>  */</span><span class="WHIT">
<span class='line'>3595</span> </span><span class="NAME">links.Timeline.ItemBox.prototype.createDOM</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3596</span> </span><span class="WHIT">    </span><span class="COMM">// background box</span><span class="WHIT">
<span class='line'>3597</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">divBox</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3598</span> </span><span class="WHIT">    </span><span class="NAME">divBox.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3599</span> </span><span class="WHIT">    </span><span class="NAME">divBox.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.left</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3600</span> </span><span class="WHIT">    </span><span class="NAME">divBox.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3601</span> 
<span class='line'>3602</span> </span><span class="WHIT">    </span><span class="COMM">// contents box (inside the background box). used for making margins</span><span class="WHIT">
<span class='line'>3603</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">divContent</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3604</span> </span><span class="WHIT">    </span><span class="NAME">divContent.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-event-content"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3605</span> </span><span class="WHIT">    </span><span class="NAME">divContent.innerHTML</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.content</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3606</span> </span><span class="WHIT">    </span><span class="NAME">divBox.appendChild</span><span class="PUNC">(</span><span class="NAME">divContent</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3607</span> 
<span class='line'>3608</span> </span><span class="WHIT">    </span><span class="COMM">// line to axis</span><span class="WHIT">
<span class='line'>3609</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">divLine</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3610</span> </span><span class="WHIT">    </span><span class="NAME">divLine.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3611</span> </span><span class="WHIT">    </span><span class="NAME">divLine.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3612</span> </span><span class="WHIT">    </span><span class="COMM">// important: the vertical line is added at the front of the list of elements,</span><span class="WHIT">
<span class='line'>3613</span> </span><span class="WHIT">    </span><span class="COMM">// so it will be drawn behind all boxes and ranges</span><span class="WHIT">
<span class='line'>3614</span> </span><span class="WHIT">    </span><span class="NAME">divBox.line</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">divLine</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3615</span> 
<span class='line'>3616</span> </span><span class="WHIT">    </span><span class="COMM">// dot on axis</span><span class="WHIT">
<span class='line'>3617</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">divDot</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3618</span> </span><span class="WHIT">    </span><span class="NAME">divDot.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3619</span> </span><span class="WHIT">    </span><span class="NAME">divDot.style.width</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3620</span> </span><span class="WHIT">    </span><span class="NAME">divDot.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3621</span> </span><span class="WHIT">    </span><span class="NAME">divBox.dot</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">divDot</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3622</span> 
<span class='line'>3623</span> </span><span class="WHIT">    </span><span class="NAME">this.dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">divBox</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3624</span> </span><span class="WHIT">    </span><span class="NAME">this.updateDOM</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3625</span> 
<span class='line'>3626</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">divBox</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3627</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3628</span> 
<span class='line'>3629</span> </span><span class="COMM">/**
<span class='line'>3630</span>  * Append the items DOM to the given HTML container. If items DOM does not yet
<span class='line'>3631</span>  * exist, it will be created first.
<span class='line'>3632</span>  * @param {Element} container
<span class='line'>3633</span>  * @override
<span class='line'>3634</span>  */</span><span class="WHIT">
<span class='line'>3635</span> </span><span class="NAME">links.Timeline.ItemBox.prototype.showDOM</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">container</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3636</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3637</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">dom</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3638</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.createDOM</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3639</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3640</span> 
<span class='line'>3641</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.parentNode</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">container</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3642</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.parentNode</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3643</span> </span><span class="WHIT">            </span><span class="COMM">// container is changed. remove from old container</span><span class="WHIT">
<span class='line'>3644</span> </span><span class="WHIT">            </span><span class="NAME">this.hideDOM</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3645</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3646</span> 
<span class='line'>3647</span> </span><span class="WHIT">        </span><span class="COMM">// append to this container</span><span class="WHIT">
<span class='line'>3648</span> </span><span class="WHIT">        </span><span class="NAME">container.appendChild</span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3649</span> </span><span class="WHIT">        </span><span class="NAME">container.insertBefore</span><span class="PUNC">(</span><span class="NAME">dom.line</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">container.firstChild</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3650</span> </span><span class="WHIT">        </span><span class="COMM">// Note: line must be added in front of the this,</span><span class="WHIT">
<span class='line'>3651</span> </span><span class="WHIT">        </span><span class="COMM">//       such that it stays below all this</span><span class="WHIT">
<span class='line'>3652</span> </span><span class="WHIT">        </span><span class="NAME">container.appendChild</span><span class="PUNC">(</span><span class="NAME">dom.dot</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3653</span> </span><span class="WHIT">        </span><span class="NAME">this.rendered</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3654</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3655</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3656</span> 
<span class='line'>3657</span> </span><span class="COMM">/**
<span class='line'>3658</span>  * Remove the items DOM from the current HTML container, but keep the DOM in
<span class='line'>3659</span>  * memory
<span class='line'>3660</span>  * @override
<span class='line'>3661</span>  */</span><span class="WHIT">
<span class='line'>3662</span> </span><span class="NAME">links.Timeline.ItemBox.prototype.hideDOM</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3663</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3664</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3665</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.parentNode</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3666</span> </span><span class="WHIT">            </span><span class="NAME">dom.parentNode.removeChild</span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3667</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3668</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.line</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">dom.line.parentNode</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3669</span> </span><span class="WHIT">            </span><span class="NAME">dom.line.parentNode.removeChild</span><span class="PUNC">(</span><span class="NAME">dom.line</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3670</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3671</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.dot</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">dom.dot.parentNode</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3672</span> </span><span class="WHIT">            </span><span class="NAME">dom.dot.parentNode.removeChild</span><span class="PUNC">(</span><span class="NAME">dom.dot</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3673</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3674</span> </span><span class="WHIT">        </span><span class="NAME">this.rendered</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3675</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3676</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3677</span> 
<span class='line'>3678</span> </span><span class="COMM">/**
<span class='line'>3679</span>  * Update the DOM of the item. This will update the content and the classes
<span class='line'>3680</span>  * of the item
<span class='line'>3681</span>  * @override
<span class='line'>3682</span>  */</span><span class="WHIT">
<span class='line'>3683</span> </span><span class="NAME">links.Timeline.ItemBox.prototype.updateDOM</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3684</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">divBox</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3685</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">divBox</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3686</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">divLine</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">divBox.line</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3687</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">divDot</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">divBox.dot</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3688</span> 
<span class='line'>3689</span> </span><span class="WHIT">        </span><span class="COMM">// update contents</span><span class="WHIT">
<span class='line'>3690</span> </span><span class="WHIT">        </span><span class="NAME">divBox.firstChild.innerHTML</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.content</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3691</span> 
<span class='line'>3692</span> </span><span class="WHIT">        </span><span class="COMM">// update class</span><span class="WHIT">
<span class='line'>3693</span> </span><span class="WHIT">        </span><span class="NAME">divBox.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-event timeline-event-box"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3694</span> </span><span class="WHIT">        </span><span class="NAME">divLine.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-event timeline-event-line"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3695</span> </span><span class="WHIT">        </span><span class="NAME">divDot.className</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-event timeline-event-dot"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3696</span> 
<span class='line'>3697</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.isCluster</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3698</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addClassName</span><span class="PUNC">(</span><span class="NAME">divBox</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'timeline-event-cluster'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3699</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addClassName</span><span class="PUNC">(</span><span class="NAME">divLine</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'timeline-event-cluster'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3700</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addClassName</span><span class="PUNC">(</span><span class="NAME">divDot</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'timeline-event-cluster'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3701</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3702</span> 
<span class='line'>3703</span> </span><span class="WHIT">        </span><span class="COMM">// add item specific class name when provided</span><span class="WHIT">
<span class='line'>3704</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.className</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3705</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addClassName</span><span class="PUNC">(</span><span class="NAME">divBox</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">this.className</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3706</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addClassName</span><span class="PUNC">(</span><span class="NAME">divLine</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">this.className</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3707</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addClassName</span><span class="PUNC">(</span><span class="NAME">divDot</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">this.className</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3708</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3709</span> 
<span class='line'>3710</span> </span><span class="WHIT">        </span><span class="COMM">// TODO: apply selected className?</span><span class="WHIT">
<span class='line'>3711</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3712</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3713</span> 
<span class='line'>3714</span> </span><span class="COMM">/**
<span class='line'>3715</span>  * Reposition the item, recalculate its left, top, and width, using the current
<span class='line'>3716</span>  * range of the timeline and the timeline options.
<span class='line'>3717</span>  * @param {links.Timeline} timeline
<span class='line'>3718</span>  * @override
<span class='line'>3719</span>  */</span><span class="WHIT">
<span class='line'>3720</span> </span><span class="NAME">links.Timeline.ItemBox.prototype.updatePosition</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">timeline</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3721</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3722</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3723</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">timeline.timeToScreen</span><span class="PUNC">(</span><span class="NAME">this.start</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>3724</span> </span><span class="WHIT">            </span><span class="NAME">axisOnTop</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">timeline.options.axisOnTop</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>3725</span> </span><span class="WHIT">            </span><span class="NAME">axisTop</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">timeline.size.axis.top</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>3726</span> </span><span class="WHIT">            </span><span class="NAME">axisHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">timeline.size.axis.height</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>3727</span> </span><span class="WHIT">            </span><span class="NAME">boxAlign</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">timeline.options.box</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">timeline.options.box.align</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT">
<span class='line'>3728</span> </span><span class="WHIT">                </span><span class="NAME">timeline.options.box.align</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3729</span> 
<span class='line'>3730</span> </span><span class="WHIT">        </span><span class="NAME">dom.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3731</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">boxAlign</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">'right'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3732</span> </span><span class="WHIT">            </span><span class="NAME">dom.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.width</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3733</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3734</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">boxAlign</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">'left'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3735</span> </span><span class="WHIT">            </span><span class="NAME">dom.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3736</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3737</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT"> </span><span class="COMM">// default or 'center'</span><span class="WHIT">
<span class='line'>3738</span> </span><span class="WHIT">            </span><span class="NAME">dom.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.width</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3739</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3740</span> 
<span class='line'>3741</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">line</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.line</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3742</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dot</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.dot</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3743</span> </span><span class="WHIT">        </span><span class="NAME">line.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.lineWidth</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3744</span> </span><span class="WHIT">        </span><span class="NAME">dot.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.dotWidth</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3745</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">axisOnTop</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3746</span> </span><span class="WHIT">            </span><span class="NAME">line.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">axisHeight</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3747</span> </span><span class="WHIT">            </span><span class="NAME">line.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.max</span><span class="PUNC">(</span><span class="NAME">this.top</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">axisHeight</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3748</span> </span><span class="WHIT">            </span><span class="NAME">dot.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">axisHeight</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.dotHeight</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3749</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3750</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3751</span> </span><span class="WHIT">            </span><span class="NAME">line.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.height</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3752</span> </span><span class="WHIT">            </span><span class="NAME">line.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.max</span><span class="PUNC">(</span><span class="NAME">axisTop</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.top</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.height</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3753</span> </span><span class="WHIT">            </span><span class="NAME">dot.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">axisTop</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.dotHeight</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3754</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3755</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3756</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3757</span> 
<span class='line'>3758</span> </span><span class="COMM">/**
<span class='line'>3759</span>  * Check if the item is visible in the timeline, and not part of a cluster
<span class='line'>3760</span>  * @param {Date} start
<span class='line'>3761</span>  * @param {Date} end
<span class='line'>3762</span>  * @return {Boolean} visible
<span class='line'>3763</span>  * @override
<span class='line'>3764</span>  */</span><span class="WHIT">
<span class='line'>3765</span> </span><span class="NAME">links.Timeline.ItemBox.prototype.isVisible</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">start</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3766</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.cluster</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3767</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3768</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3769</span> 
<span class='line'>3770</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.start</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">start</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.start</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3771</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3772</span> 
<span class='line'>3773</span> </span><span class="COMM">/**
<span class='line'>3774</span>  * Reposition the item
<span class='line'>3775</span>  * @param {Number} left
<span class='line'>3776</span>  * @param {Number} right
<span class='line'>3777</span>  * @override
<span class='line'>3778</span>  */</span><span class="WHIT">
<span class='line'>3779</span> </span><span class="NAME">links.Timeline.ItemBox.prototype.setPosition</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">right</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3780</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3781</span> 
<span class='line'>3782</span> </span><span class="WHIT">    </span><span class="NAME">dom.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.width</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3783</span> </span><span class="WHIT">    </span><span class="NAME">dom.line.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.lineWidth</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3784</span> </span><span class="WHIT">    </span><span class="NAME">dom.dot.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.dotWidth</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3785</span> 
<span class='line'>3786</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.group</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3787</span> </span><span class="WHIT">        </span><span class="NAME">this.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.group.top</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3788</span> </span><span class="WHIT">        </span><span class="NAME">dom.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3789</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3790</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3791</span> 
<span class='line'>3792</span> </span><span class="COMM">/**
<span class='line'>3793</span>  * Calculate the right position of the item
<span class='line'>3794</span>  * @param {links.Timeline} timeline
<span class='line'>3795</span>  * @return {Number} right
<span class='line'>3796</span>  * @override
<span class='line'>3797</span>  */</span><span class="WHIT">
<span class='line'>3798</span> </span><span class="NAME">links.Timeline.ItemBox.prototype.getRight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">timeline</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3799</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">boxAlign</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">timeline.options.box</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">timeline.options.box.align</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT">
<span class='line'>3800</span> </span><span class="WHIT">        </span><span class="NAME">timeline.options.box.align</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3801</span> 
<span class='line'>3802</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">timeline.timeToScreen</span><span class="PUNC">(</span><span class="NAME">this.start</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3803</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">right</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3804</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">boxAlign</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">'right'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3805</span> </span><span class="WHIT">        </span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">left</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3806</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3807</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">boxAlign</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">'left'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3808</span> </span><span class="WHIT">        </span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.width</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3809</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3810</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT"> </span><span class="COMM">// default or 'center'</span><span class="WHIT">
<span class='line'>3811</span> </span><span class="WHIT">        </span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.width</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3812</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3813</span> 
<span class='line'>3814</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">right</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3815</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3816</span> 
<span class='line'>3817</span> </span><span class="COMM">/**
<span class='line'>3818</span>  * @constructor links.Timeline.ItemRange
<span class='line'>3819</span>  * @extends links.Timeline.Item
<span class='line'>3820</span>  * @param {Object} data       Object containing parameters start, end
<span class='line'>3821</span>  *                            content, group. type, group.
<span class='line'>3822</span>  * @param {Object} [options]  Options to set initial property values
<span class='line'>3823</span>  *                                {Number} top
<span class='line'>3824</span>  *                                {Number} left
<span class='line'>3825</span>  *                                {Number} width
<span class='line'>3826</span>  *                                {Number} height
<span class='line'>3827</span>  */</span><span class="WHIT">
<span class='line'>3828</span> </span><span class="NAME">links.Timeline.ItemRange</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">data</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">options</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3829</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.Item.call</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">data</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">options</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3830</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3831</span> 
<span class='line'>3832</span> </span><span class="NAME">links.Timeline.ItemRange.prototype</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">links.Timeline.Item</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3833</span> 
<span class='line'>3834</span> </span><span class="COMM">/**
<span class='line'>3835</span>  * Select the item
<span class='line'>3836</span>  * @override
<span class='line'>3837</span>  */</span><span class="WHIT">
<span class='line'>3838</span> </span><span class="NAME">links.Timeline.ItemRange.prototype.select</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3839</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3840</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.addClassName</span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'timeline-event-selected'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3841</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3842</span> 
<span class='line'>3843</span> </span><span class="COMM">/**
<span class='line'>3844</span>  * Unselect the item
<span class='line'>3845</span>  * @override
<span class='line'>3846</span>  */</span><span class="WHIT">
<span class='line'>3847</span> </span><span class="NAME">links.Timeline.ItemRange.prototype.unselect</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3848</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3849</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.removeClassName</span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'timeline-event-selected'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3850</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3851</span> 
<span class='line'>3852</span> </span><span class="COMM">/**
<span class='line'>3853</span>  * Creates the DOM for the item, depending on its type
<span class='line'>3854</span>  * @return {Element | undefined}
<span class='line'>3855</span>  * @override
<span class='line'>3856</span>  */</span><span class="WHIT">
<span class='line'>3857</span> </span><span class="NAME">links.Timeline.ItemRange.prototype.createDOM</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3858</span> </span><span class="WHIT">    </span><span class="COMM">// background box</span><span class="WHIT">
<span class='line'>3859</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">divBox</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3860</span> </span><span class="WHIT">    </span><span class="NAME">divBox.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3861</span> 
<span class='line'>3862</span> </span><span class="WHIT">    </span><span class="COMM">// contents box</span><span class="WHIT">
<span class='line'>3863</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">divContent</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3864</span> </span><span class="WHIT">    </span><span class="NAME">divContent.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-event-content"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3865</span> </span><span class="WHIT">    </span><span class="NAME">divBox.appendChild</span><span class="PUNC">(</span><span class="NAME">divContent</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3866</span> 
<span class='line'>3867</span> </span><span class="WHIT">    </span><span class="NAME">this.dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">divBox</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3868</span> </span><span class="WHIT">    </span><span class="NAME">this.updateDOM</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3869</span> 
<span class='line'>3870</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">divBox</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3871</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3872</span> 
<span class='line'>3873</span> </span><span class="COMM">/**
<span class='line'>3874</span>  * Append the items DOM to the given HTML container. If items DOM does not yet
<span class='line'>3875</span>  * exist, it will be created first.
<span class='line'>3876</span>  * @param {Element} container
<span class='line'>3877</span>  * @override
<span class='line'>3878</span>  */</span><span class="WHIT">
<span class='line'>3879</span> </span><span class="NAME">links.Timeline.ItemRange.prototype.showDOM</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">container</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3880</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3881</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">dom</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3882</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.createDOM</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3883</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3884</span> 
<span class='line'>3885</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.parentNode</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">container</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3886</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.parentNode</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3887</span> </span><span class="WHIT">            </span><span class="COMM">// container changed. remove the item from the old container</span><span class="WHIT">
<span class='line'>3888</span> </span><span class="WHIT">            </span><span class="NAME">this.hideDOM</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3889</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3890</span> 
<span class='line'>3891</span> </span><span class="WHIT">        </span><span class="COMM">// append to the new container</span><span class="WHIT">
<span class='line'>3892</span> </span><span class="WHIT">        </span><span class="NAME">container.appendChild</span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3893</span> </span><span class="WHIT">        </span><span class="NAME">this.rendered</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3894</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3895</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3896</span> 
<span class='line'>3897</span> </span><span class="COMM">/**
<span class='line'>3898</span>  * Remove the items DOM from the current HTML container
<span class='line'>3899</span>  * The DOM will be kept in memory
<span class='line'>3900</span>  * @override
<span class='line'>3901</span>  */</span><span class="WHIT">
<span class='line'>3902</span> </span><span class="NAME">links.Timeline.ItemRange.prototype.hideDOM</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3903</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3904</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3905</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.parentNode</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3906</span> </span><span class="WHIT">            </span><span class="NAME">dom.parentNode.removeChild</span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3907</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3908</span> </span><span class="WHIT">        </span><span class="NAME">this.rendered</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3909</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3910</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3911</span> 
<span class='line'>3912</span> </span><span class="COMM">/**
<span class='line'>3913</span>  * Update the DOM of the item. This will update the content and the classes
<span class='line'>3914</span>  * of the item
<span class='line'>3915</span>  * @override
<span class='line'>3916</span>  */</span><span class="WHIT">
<span class='line'>3917</span> </span><span class="NAME">links.Timeline.ItemRange.prototype.updateDOM</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3918</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">divBox</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3919</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">divBox</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3920</span> </span><span class="WHIT">        </span><span class="COMM">// update contents</span><span class="WHIT">
<span class='line'>3921</span> </span><span class="WHIT">        </span><span class="NAME">divBox.firstChild.innerHTML</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.content</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3922</span> 
<span class='line'>3923</span> </span><span class="WHIT">        </span><span class="COMM">// update class</span><span class="WHIT">
<span class='line'>3924</span> </span><span class="WHIT">        </span><span class="NAME">divBox.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-event timeline-event-range"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3925</span> 
<span class='line'>3926</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.isCluster</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3927</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addClassName</span><span class="PUNC">(</span><span class="NAME">divBox</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'timeline-event-cluster'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3928</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3929</span> 
<span class='line'>3930</span> </span><span class="WHIT">        </span><span class="COMM">// add item specific class name when provided</span><span class="WHIT">
<span class='line'>3931</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.className</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3932</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addClassName</span><span class="PUNC">(</span><span class="NAME">divBox</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">this.className</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3933</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3934</span> 
<span class='line'>3935</span> </span><span class="WHIT">        </span><span class="COMM">// TODO: apply selected className?</span><span class="WHIT">
<span class='line'>3936</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3937</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3938</span> 
<span class='line'>3939</span> </span><span class="COMM">/**
<span class='line'>3940</span>  * Reposition the item, recalculate its left, top, and width, using the current
<span class='line'>3941</span>  * range of the timeline and the timeline options. *
<span class='line'>3942</span>  * @param {links.Timeline} timeline
<span class='line'>3943</span>  * @override
<span class='line'>3944</span>  */</span><span class="WHIT">
<span class='line'>3945</span> </span><span class="NAME">links.Timeline.ItemRange.prototype.updatePosition</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">timeline</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3946</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3947</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3948</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">contentWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">timeline.size.contentWidth</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>3949</span> </span><span class="WHIT">            </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">timeline.timeToScreen</span><span class="PUNC">(</span><span class="NAME">this.start</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>3950</span> </span><span class="WHIT">            </span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">timeline.timeToScreen</span><span class="PUNC">(</span><span class="NAME">this.end</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3951</span> 
<span class='line'>3952</span> </span><span class="WHIT">        </span><span class="COMM">// limit the width of the this, as browsers cannot draw very wide divs</span><span class="WHIT">
<span class='line'>3953</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NAME">contentWidth</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3954</span> </span><span class="WHIT">            </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NAME">contentWidth</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3955</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3956</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NUMB">2</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">contentWidth</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3957</span> </span><span class="WHIT">            </span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">contentWidth</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3958</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3959</span> 
<span class='line'>3960</span> </span><span class="WHIT">        </span><span class="NAME">dom.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3961</span> </span><span class="WHIT">        </span><span class="NAME">dom.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3962</span> </span><span class="WHIT">        </span><span class="COMM">//dom.style.width = Math.max(right - left - 2 * this.borderWidth, 1) + "px"; // TODO: borderWidth</span><span class="WHIT">
<span class='line'>3963</span> </span><span class="WHIT">        </span><span class="NAME">dom.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.max</span><span class="PUNC">(</span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">left</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3964</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3965</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3966</span> 
<span class='line'>3967</span> </span><span class="COMM">/**
<span class='line'>3968</span>  * Check if the item is visible in the timeline, and not part of a cluster
<span class='line'>3969</span>  * @param {Number} start
<span class='line'>3970</span>  * @param {Number} end
<span class='line'>3971</span>  * @return {boolean} visible
<span class='line'>3972</span>  * @override
<span class='line'>3973</span>  */</span><span class="WHIT">
<span class='line'>3974</span> </span><span class="NAME">links.Timeline.ItemRange.prototype.isVisible</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">start</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3975</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.cluster</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3976</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3977</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3978</span> 
<span class='line'>3979</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.end</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">start</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>3980</span> </span><span class="WHIT">        </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.start</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3981</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3982</span> 
<span class='line'>3983</span> </span><span class="COMM">/**
<span class='line'>3984</span>  * Reposition the item
<span class='line'>3985</span>  * @param {Number} left
<span class='line'>3986</span>  * @param {Number} right
<span class='line'>3987</span>  * @override
<span class='line'>3988</span>  */</span><span class="WHIT">
<span class='line'>3989</span> </span><span class="NAME">links.Timeline.ItemRange.prototype.setPosition</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">right</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3990</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3991</span> 
<span class='line'>3992</span> </span><span class="WHIT">    </span><span class="NAME">dom.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3993</span> </span><span class="WHIT">    </span><span class="NAME">dom.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">left</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3994</span> 
<span class='line'>3995</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.group</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>3996</span> </span><span class="WHIT">        </span><span class="NAME">this.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.group.top</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3997</span> </span><span class="WHIT">        </span><span class="NAME">dom.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>3998</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>3999</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4000</span> 
<span class='line'>4001</span> </span><span class="COMM">/**
<span class='line'>4002</span>  * Calculate the right position of the item
<span class='line'>4003</span>  * @param {links.Timeline} timeline
<span class='line'>4004</span>  * @return {Number} right
<span class='line'>4005</span>  * @override
<span class='line'>4006</span>  */</span><span class="WHIT">
<span class='line'>4007</span> </span><span class="NAME">links.Timeline.ItemRange.prototype.getRight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">timeline</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4008</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">timeline.timeToScreen</span><span class="PUNC">(</span><span class="NAME">this.end</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4009</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4010</span> 
<span class='line'>4011</span> </span><span class="COMM">/**
<span class='line'>4012</span>  * Calculate the width of the item
<span class='line'>4013</span>  * @param {links.Timeline} timeline
<span class='line'>4014</span>  * @return {Number} width
<span class='line'>4015</span>  * @override
<span class='line'>4016</span>  */</span><span class="WHIT">
<span class='line'>4017</span> </span><span class="NAME">links.Timeline.ItemRange.prototype.getWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">timeline</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4018</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">timeline.timeToScreen</span><span class="PUNC">(</span><span class="NAME">this.end</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">timeline.timeToScreen</span><span class="PUNC">(</span><span class="NAME">this.start</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4019</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4020</span> 
<span class='line'>4021</span> </span><span class="COMM">/**
<span class='line'>4022</span>  * @constructor links.Timeline.ItemDot
<span class='line'>4023</span>  * @extends links.Timeline.Item
<span class='line'>4024</span>  * @param {Object} data       Object containing parameters start, end
<span class='line'>4025</span>  *                            content, group, type.
<span class='line'>4026</span>  * @param {Object} [options]  Options to set initial property values
<span class='line'>4027</span>  *                                {Number} top
<span class='line'>4028</span>  *                                {Number} left
<span class='line'>4029</span>  *                                {Number} width
<span class='line'>4030</span>  *                                {Number} height
<span class='line'>4031</span>  */</span><span class="WHIT">
<span class='line'>4032</span> </span><span class="NAME">links.Timeline.ItemDot</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">data</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">options</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4033</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.Item.call</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">data</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">options</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4034</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4035</span> 
<span class='line'>4036</span> </span><span class="NAME">links.Timeline.ItemDot.prototype</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">links.Timeline.Item</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4037</span> 
<span class='line'>4038</span> </span><span class="COMM">/**
<span class='line'>4039</span>  * Reflow the Item: retrieve its actual size from the DOM
<span class='line'>4040</span>  * @return {boolean} resized    returns true if the axis is resized
<span class='line'>4041</span>  * @override
<span class='line'>4042</span>  */</span><span class="WHIT">
<span class='line'>4043</span> </span><span class="NAME">links.Timeline.ItemDot.prototype.reflow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4044</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4045</span> </span><span class="WHIT">        </span><span class="NAME">dotHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.dot.offsetHeight</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4046</span> </span><span class="WHIT">        </span><span class="NAME">dotWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.dot.offsetWidth</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4047</span> </span><span class="WHIT">        </span><span class="NAME">contentHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dom.content.offsetHeight</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4048</span> </span><span class="WHIT">        </span><span class="NAME">resized</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="WHIT">
<span class='line'>4049</span> </span><span class="WHIT">            </span><span class="PUNC">(</span><span class="NAME">this.dotHeight</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">dotHeight</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT">
<span class='line'>4050</span> </span><span class="WHIT">                </span><span class="PUNC">(</span><span class="NAME">this.dotWidth</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">dotWidth</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT">
<span class='line'>4051</span> </span><span class="WHIT">                </span><span class="PUNC">(</span><span class="NAME">this.contentHeight</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">contentHeight</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>4052</span> </span><span class="WHIT">            </span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4053</span> 
<span class='line'>4054</span> </span><span class="WHIT">    </span><span class="NAME">this.dotHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dotHeight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4055</span> </span><span class="WHIT">    </span><span class="NAME">this.dotWidth</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">dotWidth</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4056</span> </span><span class="WHIT">    </span><span class="NAME">this.contentHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">contentHeight</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4057</span> 
<span class='line'>4058</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">resized</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4059</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4060</span> 
<span class='line'>4061</span> </span><span class="COMM">/**
<span class='line'>4062</span>  * Select the item
<span class='line'>4063</span>  * @override
<span class='line'>4064</span>  */</span><span class="WHIT">
<span class='line'>4065</span> </span><span class="NAME">links.Timeline.ItemDot.prototype.select</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4066</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4067</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.addClassName</span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'timeline-event-selected'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4068</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4069</span> 
<span class='line'>4070</span> </span><span class="COMM">/**
<span class='line'>4071</span>  * Unselect the item
<span class='line'>4072</span>  * @override
<span class='line'>4073</span>  */</span><span class="WHIT">
<span class='line'>4074</span> </span><span class="NAME">links.Timeline.ItemDot.prototype.unselect</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4075</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4076</span> </span><span class="WHIT">    </span><span class="NAME">links.Timeline.removeClassName</span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'timeline-event-selected'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4077</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4078</span> 
<span class='line'>4079</span> </span><span class="COMM">/**
<span class='line'>4080</span>  * Creates the DOM for the item, depending on its type
<span class='line'>4081</span>  * @return {Element | undefined}
<span class='line'>4082</span>  * @override
<span class='line'>4083</span>  */</span><span class="WHIT">
<span class='line'>4084</span> </span><span class="NAME">links.Timeline.ItemDot.prototype.createDOM</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4085</span> </span><span class="WHIT">    </span><span class="COMM">// background box</span><span class="WHIT">
<span class='line'>4086</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">divBox</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4087</span> </span><span class="WHIT">    </span><span class="NAME">divBox.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4088</span> 
<span class='line'>4089</span> </span><span class="WHIT">    </span><span class="COMM">// contents box, right from the dot</span><span class="WHIT">
<span class='line'>4090</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">divContent</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4091</span> </span><span class="WHIT">    </span><span class="NAME">divContent.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-event-content"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4092</span> </span><span class="WHIT">    </span><span class="NAME">divBox.appendChild</span><span class="PUNC">(</span><span class="NAME">divContent</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4093</span> 
<span class='line'>4094</span> </span><span class="WHIT">    </span><span class="COMM">// dot at start</span><span class="WHIT">
<span class='line'>4095</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">divDot</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">"DIV"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4096</span> </span><span class="WHIT">    </span><span class="NAME">divDot.style.position</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"absolute"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4097</span> </span><span class="WHIT">    </span><span class="NAME">divDot.style.width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4098</span> </span><span class="WHIT">    </span><span class="NAME">divDot.style.height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4099</span> </span><span class="WHIT">    </span><span class="NAME">divBox.appendChild</span><span class="PUNC">(</span><span class="NAME">divDot</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4100</span> 
<span class='line'>4101</span> </span><span class="WHIT">    </span><span class="NAME">divBox.content</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">divContent</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4102</span> </span><span class="WHIT">    </span><span class="NAME">divBox.dot</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">divDot</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4103</span> 
<span class='line'>4104</span> </span><span class="WHIT">    </span><span class="NAME">this.dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">divBox</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4105</span> </span><span class="WHIT">    </span><span class="NAME">this.updateDOM</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4106</span> 
<span class='line'>4107</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">divBox</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4108</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4109</span> 
<span class='line'>4110</span> </span><span class="COMM">/**
<span class='line'>4111</span>  * Append the items DOM to the given HTML container. If items DOM does not yet
<span class='line'>4112</span>  * exist, it will be created first.
<span class='line'>4113</span>  * @param {Element} container
<span class='line'>4114</span>  * @override
<span class='line'>4115</span>  */</span><span class="WHIT">
<span class='line'>4116</span> </span><span class="NAME">links.Timeline.ItemDot.prototype.showDOM</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">container</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4117</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4118</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">dom</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4119</span> </span><span class="WHIT">        </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.createDOM</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4120</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4121</span> 
<span class='line'>4122</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.parentNode</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">container</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4123</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.parentNode</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4124</span> </span><span class="WHIT">            </span><span class="COMM">// container changed. remove it from old container first</span><span class="WHIT">
<span class='line'>4125</span> </span><span class="WHIT">            </span><span class="NAME">this.hideDOM</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4126</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4127</span> 
<span class='line'>4128</span> </span><span class="WHIT">        </span><span class="COMM">// append to container</span><span class="WHIT">
<span class='line'>4129</span> </span><span class="WHIT">        </span><span class="NAME">container.appendChild</span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4130</span> </span><span class="WHIT">        </span><span class="NAME">this.rendered</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4131</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4132</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4133</span> 
<span class='line'>4134</span> </span><span class="COMM">/**
<span class='line'>4135</span>  * Remove the items DOM from the current HTML container
<span class='line'>4136</span>  * @override
<span class='line'>4137</span>  */</span><span class="WHIT">
<span class='line'>4138</span> </span><span class="NAME">links.Timeline.ItemDot.prototype.hideDOM</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4139</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4140</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4141</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom.parentNode</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4142</span> </span><span class="WHIT">            </span><span class="NAME">dom.parentNode.removeChild</span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4143</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4144</span> </span><span class="WHIT">        </span><span class="NAME">this.rendered</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4145</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4146</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4147</span> 
<span class='line'>4148</span> </span><span class="COMM">/**
<span class='line'>4149</span>  * Update the DOM of the item. This will update the content and the classes
<span class='line'>4150</span>  * of the item
<span class='line'>4151</span>  * @override
<span class='line'>4152</span>  */</span><span class="WHIT">
<span class='line'>4153</span> </span><span class="NAME">links.Timeline.ItemDot.prototype.updateDOM</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4154</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.dom</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4155</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">divBox</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4156</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">divDot</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">divBox.dot</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4157</span> 
<span class='line'>4158</span> </span><span class="WHIT">        </span><span class="COMM">// update contents</span><span class="WHIT">
<span class='line'>4159</span> </span><span class="WHIT">        </span><span class="NAME">divBox.firstChild.innerHTML</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.content</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4160</span> 
<span class='line'>4161</span> </span><span class="WHIT">        </span><span class="COMM">// update class</span><span class="WHIT">
<span class='line'>4162</span> </span><span class="WHIT">        </span><span class="NAME">divDot.className</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"timeline-event timeline-event-dot"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4163</span> 
<span class='line'>4164</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.isCluster</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4165</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addClassName</span><span class="PUNC">(</span><span class="NAME">divBox</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'timeline-event-cluster'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4166</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addClassName</span><span class="PUNC">(</span><span class="NAME">divDot</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">'timeline-event-cluster'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4167</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4168</span> 
<span class='line'>4169</span> </span><span class="WHIT">        </span><span class="COMM">// add item specific class name when provided</span><span class="WHIT">
<span class='line'>4170</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.className</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4171</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addClassName</span><span class="PUNC">(</span><span class="NAME">divBox</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">this.className</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4172</span> </span><span class="WHIT">            </span><span class="NAME">links.Timeline.addClassName</span><span class="PUNC">(</span><span class="NAME">divDot</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">this.className</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4173</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4174</span> 
<span class='line'>4175</span> </span><span class="WHIT">        </span><span class="COMM">// TODO: apply selected className?</span><span class="WHIT">
<span class='line'>4176</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4177</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4178</span> 
<span class='line'>4179</span> </span><span class="COMM">/**
<span class='line'>4180</span>  * Reposition the item, recalculate its left, top, and width, using the current
<span class='line'>4181</span>  * range of the timeline and the timeline options. *
<span class='line'>4182</span>  * @param {links.Timeline} timeline
<span class='line'>4183</span>  * @override
<span class='line'>4184</span>  */</span><span class="WHIT">
<span class='line'>4185</span> </span><span class="NAME">links.Timeline.ItemDot.prototype.updatePosition</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">timeline</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4186</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4187</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">dom</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4188</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">timeline.timeToScreen</span><span class="PUNC">(</span><span class="NAME">this.start</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4189</span> 
<span class='line'>4190</span> </span><span class="WHIT">        </span><span class="NAME">dom.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4191</span> </span><span class="WHIT">        </span><span class="NAME">dom.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.dotWidth</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4192</span> 
<span class='line'>4193</span> </span><span class="WHIT">        </span><span class="NAME">dom.content.style.marginLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NUMB">1.5</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">this.dotWidth</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4194</span> </span><span class="WHIT">        </span><span class="COMM">//dom.content.style.marginRight = (0.5 * this.dotWidth) + "px"; // TODO</span><span class="WHIT">
<span class='line'>4195</span> </span><span class="WHIT">        </span><span class="NAME">dom.dot.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">(</span><span class="NAME">this.height</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.dotHeight</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4196</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4197</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4198</span> 
<span class='line'>4199</span> </span><span class="COMM">/**
<span class='line'>4200</span>  * Check if the item is visible in the timeline, and not part of a cluster.
<span class='line'>4201</span>  * @param {Date} start
<span class='line'>4202</span>  * @param {Date} end
<span class='line'>4203</span>  * @return {boolean} visible
<span class='line'>4204</span>  * @override
<span class='line'>4205</span>  */</span><span class="WHIT">
<span class='line'>4206</span> </span><span class="NAME">links.Timeline.ItemDot.prototype.isVisible</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">start</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4207</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.cluster</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4208</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4209</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4210</span> 
<span class='line'>4211</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.start</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">start</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>4212</span> </span><span class="WHIT">        </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.start</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4213</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4214</span> 
<span class='line'>4215</span> </span><span class="COMM">/**
<span class='line'>4216</span>  * Reposition the item
<span class='line'>4217</span>  * @param {Number} left
<span class='line'>4218</span>  * @param {Number} right
<span class='line'>4219</span>  * @override
<span class='line'>4220</span>  */</span><span class="WHIT">
<span class='line'>4221</span> </span><span class="NAME">links.Timeline.ItemDot.prototype.setPosition</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">right</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4222</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">dom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4223</span> 
<span class='line'>4224</span> </span><span class="WHIT">    </span><span class="NAME">dom.style.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.dotWidth</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">"px"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4225</span> 
<span class='line'>4226</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.group</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4227</span> </span><span class="WHIT">        </span><span class="NAME">this.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.group.top</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4228</span> </span><span class="WHIT">        </span><span class="NAME">dom.style.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'px'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4229</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4230</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4231</span> 
<span class='line'>4232</span> </span><span class="COMM">/**
<span class='line'>4233</span>  * Calculate the right position of the item
<span class='line'>4234</span>  * @param {links.Timeline} timeline
<span class='line'>4235</span>  * @return {Number} right
<span class='line'>4236</span>  * @override
<span class='line'>4237</span>  */</span><span class="WHIT">
<span class='line'>4238</span> </span><span class="NAME">links.Timeline.ItemDot.prototype.getRight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">timeline</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4239</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">timeline.timeToScreen</span><span class="PUNC">(</span><span class="NAME">this.start</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.width</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4240</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4241</span> 
<span class='line'>4242</span> </span><span class="COMM">/**
<span class='line'>4243</span>  * Retrieve the properties of an item.
<span class='line'>4244</span>  * @param {Number} index
<span class='line'>4245</span>  * @return {Object} properties   Object containing item properties:&lt;br>
<span class='line'>4246</span>  *                              {Date} start (required),
<span class='line'>4247</span>  *                              {Date} end (optional),
<span class='line'>4248</span>  *                              {String} content (required),
<span class='line'>4249</span>  *                              {String} group (optional)
<span class='line'>4250</span>  */</span><span class="WHIT">
<span class='line'>4251</span> </span><span class="NAME">links.Timeline.prototype.getItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4252</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">>=</span><span class="WHIT"> </span><span class="NAME">this.items.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4253</span> </span><span class="WHIT">        </span><span class="KEYW">throw</span><span class="WHIT"> </span><span class="STRN">"Cannot get item, index out of range"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4254</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4255</span> 
<span class='line'>4256</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.items</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4257</span> 
<span class='line'>4258</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">properties</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4259</span> </span><span class="WHIT">    </span><span class="NAME">properties.start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">item.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4260</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item.end</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4261</span> </span><span class="WHIT">        </span><span class="NAME">properties.end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">item.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4262</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4263</span> </span><span class="WHIT">    </span><span class="NAME">properties.content</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.content</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4264</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item.group</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4265</span> </span><span class="WHIT">        </span><span class="NAME">properties.group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getGroupName</span><span class="PUNC">(</span><span class="NAME">item.group</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4266</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4267</span> 
<span class='line'>4268</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">properties</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4269</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4270</span> 
<span class='line'>4271</span> </span><span class="COMM">/**
<span class='line'>4272</span>  * Add a new item.
<span class='line'>4273</span>  * @param {Object} itemData     Object containing item properties:&lt;br>
<span class='line'>4274</span>  *                              {Date} start (required),
<span class='line'>4275</span>  *                              {Date} end (optional),
<span class='line'>4276</span>  *                              {String} content (required),
<span class='line'>4277</span>  *                              {String} group (optional)
<span class='line'>4278</span>  * @param {boolean} [preventRender=false]   Do not re-render timeline if true
<span class='line'>4279</span>  */</span><span class="WHIT">
<span class='line'>4280</span> </span><span class="NAME">links.Timeline.prototype.addItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">itemData</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">preventRender</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4281</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">itemsData</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="WHIT">
<span class='line'>4282</span> </span><span class="WHIT">        </span><span class="NAME">itemData</span><span class="WHIT">
<span class='line'>4283</span> </span><span class="WHIT">    </span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4284</span> 
<span class='line'>4285</span> </span><span class="WHIT">    </span><span class="NAME">this.addItems</span><span class="PUNC">(</span><span class="NAME">itemsData</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">preventRender</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4286</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4287</span> 
<span class='line'>4288</span> </span><span class="COMM">/**
<span class='line'>4289</span>  * Add new items.
<span class='line'>4290</span>  * @param {Array} itemsData An array containing Objects.
<span class='line'>4291</span>  *                          The objects must have the following parameters:
<span class='line'>4292</span>  *                            {Date} start,
<span class='line'>4293</span>  *                            {Date} end,
<span class='line'>4294</span>  *                            {String} content with text or HTML code,
<span class='line'>4295</span>  *                            {String} group
<span class='line'>4296</span>  * @param {boolean} [preventRender=false]   Do not re-render timeline if true
<span class='line'>4297</span>  */</span><span class="WHIT">
<span class='line'>4298</span> </span><span class="NAME">links.Timeline.prototype.addItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">itemsData</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">preventRender</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4299</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">timeline</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4300</span> </span><span class="WHIT">        </span><span class="NAME">items</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.items</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4301</span> 
<span class='line'>4302</span> </span><span class="WHIT">    </span><span class="COMM">// append the items</span><span class="WHIT">
<span class='line'>4303</span> </span><span class="WHIT">    </span><span class="NAME">itemsData.forEach</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">itemData</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4304</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">items.length</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4305</span> </span><span class="WHIT">        </span><span class="NAME">items.push</span><span class="PUNC">(</span><span class="NAME">timeline.createItem</span><span class="PUNC">(</span><span class="NAME">itemData</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4306</span> </span><span class="WHIT">        </span><span class="NAME">timeline.updateData</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">itemData</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4307</span> 
<span class='line'>4308</span> </span><span class="WHIT">        </span><span class="COMM">// note: there is no need to add the item to the renderQueue, that</span><span class="WHIT">
<span class='line'>4309</span> </span><span class="WHIT">        </span><span class="COMM">// will be done when this.render() is executed and all items are</span><span class="WHIT">
<span class='line'>4310</span> </span><span class="WHIT">        </span><span class="COMM">// filtered again.</span><span class="WHIT">
<span class='line'>4311</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4312</span> 
<span class='line'>4313</span> </span><span class="WHIT">    </span><span class="COMM">// prepare data for clustering, by filtering and sorting by type</span><span class="WHIT">
<span class='line'>4314</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.options.cluster</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4315</span> </span><span class="WHIT">        </span><span class="NAME">this.clusterGenerator.updateData</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4316</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4317</span> 
<span class='line'>4318</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">preventRender</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4319</span> </span><span class="WHIT">        </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4320</span> </span><span class="WHIT">            </span><span class="NAME">animate</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="WHIT">
<span class='line'>4321</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4322</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4323</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4324</span> 
<span class='line'>4325</span> </span><span class="COMM">/**
<span class='line'>4326</span>  * Create an item object, containing all needed parameters
<span class='line'>4327</span>  * @param {Object} itemData  Object containing parameters start, end
<span class='line'>4328</span>  *                           content, group.
<span class='line'>4329</span>  * @return {Object} item
<span class='line'>4330</span>  */</span><span class="WHIT">
<span class='line'>4331</span> </span><span class="NAME">links.Timeline.prototype.createItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">itemData</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4332</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">type</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">itemData.end</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="STRN">'range'</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">this.options.style</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4333</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">data</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4334</span> </span><span class="WHIT">        </span><span class="NAME">start</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">itemData.start</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4335</span> </span><span class="WHIT">        </span><span class="NAME">end</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">itemData.end</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4336</span> </span><span class="WHIT">        </span><span class="NAME">content</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">itemData.content</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4337</span> </span><span class="WHIT">        </span><span class="NAME">className</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">itemData.className</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4338</span> </span><span class="WHIT">        </span><span class="NAME">editable</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">itemData.editable</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4339</span> </span><span class="WHIT">        </span><span class="NAME">group</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">this.getGroup</span><span class="PUNC">(</span><span class="NAME">itemData.group</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>4340</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4341</span> </span><span class="WHIT">    </span><span class="COMM">// TODO: optimize this, when creating an item, all data is copied twice...</span><span class="WHIT">
<span class='line'>4342</span> 
<span class='line'>4343</span> </span><span class="WHIT">    </span><span class="COMM">// TODO: is initialTop needed?</span><span class="WHIT">
<span class='line'>4344</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">initialTop</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4345</span> </span><span class="WHIT">        </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4346</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options.axisOnTop</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4347</span> </span><span class="WHIT">        </span><span class="NAME">initialTop</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size.axis.height</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">options.eventMarginAxis</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">options.eventMargin</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4348</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4349</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4350</span> </span><span class="WHIT">        </span><span class="NAME">initialTop</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size.contentHeight</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">options.eventMarginAxis</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">options.eventMargin</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4351</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4352</span> 
<span class='line'>4353</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">type</span><span class="WHIT"> </span><span class="KEYW">in</span><span class="WHIT"> </span><span class="NAME">this.itemTypes</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4354</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">this.itemTypes</span><span class="PUNC">[</span><span class="NAME">type</span><span class="PUNC">]</span><span class="PUNC">(</span><span class="NAME">data</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="STRN">'top'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">initialTop</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>4355</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4356</span> 
<span class='line'>4357</span> </span><span class="WHIT">    </span><span class="NAME">console.log</span><span class="PUNC">(</span><span class="STRN">'ERROR: Unknown event style "'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">type</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'"'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4358</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">links.Timeline.Item</span><span class="PUNC">(</span><span class="NAME">data</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4359</span> </span><span class="WHIT">        </span><span class="STRN">'top'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">initialTop</span><span class="WHIT">
<span class='line'>4360</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4361</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4362</span> 
<span class='line'>4363</span> </span><span class="COMM">/**
<span class='line'>4364</span>  * Edit an item
<span class='line'>4365</span>  * @param {Number} index
<span class='line'>4366</span>  * @param {Object} itemData     Object containing item properties:&lt;br>
<span class='line'>4367</span>  *                              {Date} start (required),
<span class='line'>4368</span>  *                              {Date} end (optional),
<span class='line'>4369</span>  *                              {String} content (required),
<span class='line'>4370</span>  *                              {String} group (optional)
<span class='line'>4371</span>  * @param {boolean} [preventRender=false]   Do not re-render timeline if true
<span class='line'>4372</span>  */</span><span class="WHIT">
<span class='line'>4373</span> </span><span class="NAME">links.Timeline.prototype.changeItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">itemData</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">preventRender</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4374</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">oldItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.items</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4375</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">oldItem</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4376</span> </span><span class="WHIT">        </span><span class="KEYW">throw</span><span class="WHIT"> </span><span class="STRN">"Cannot change item, index out of range"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4377</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4378</span> 
<span class='line'>4379</span> </span><span class="WHIT">    </span><span class="COMM">// replace item, merge the changes</span><span class="WHIT">
<span class='line'>4380</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">newItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.createItem</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4381</span> </span><span class="WHIT">        </span><span class="STRN">'start'</span><span class="PUNC">:</span><span class="WHIT">   </span><span class="NAME">itemData.hasOwnProperty</span><span class="PUNC">(</span><span class="STRN">'start'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT">   </span><span class="NAME">itemData.start</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT">   </span><span class="NAME">oldItem.start</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4382</span> </span><span class="WHIT">        </span><span class="STRN">'end'</span><span class="PUNC">:</span><span class="WHIT">     </span><span class="NAME">itemData.hasOwnProperty</span><span class="PUNC">(</span><span class="STRN">'end'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT">     </span><span class="NAME">itemData.end</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT">     </span><span class="NAME">oldItem.end</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4383</span> </span><span class="WHIT">        </span><span class="STRN">'content'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">itemData.hasOwnProperty</span><span class="PUNC">(</span><span class="STRN">'content'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">itemData.content</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">oldItem.content</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4384</span> </span><span class="WHIT">        </span><span class="STRN">'group'</span><span class="PUNC">:</span><span class="WHIT">   </span><span class="NAME">itemData.hasOwnProperty</span><span class="PUNC">(</span><span class="STRN">'group'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT">   </span><span class="NAME">itemData.group</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT">   </span><span class="NAME">this.getGroupName</span><span class="PUNC">(</span><span class="NAME">oldItem.group</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4385</span> </span><span class="WHIT">        </span><span class="STRN">'className'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">itemData.hasOwnProperty</span><span class="PUNC">(</span><span class="STRN">'className'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">itemData.className</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">oldItem.className</span><span class="WHIT">
<span class='line'>4386</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4387</span> </span><span class="WHIT">    </span><span class="NAME">this.items</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">newItem</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4388</span> 
<span class='line'>4389</span> </span><span class="WHIT">    </span><span class="COMM">// append the changes to the render queue</span><span class="WHIT">
<span class='line'>4390</span> </span><span class="WHIT">    </span><span class="NAME">this.renderQueue.hide.push</span><span class="PUNC">(</span><span class="NAME">oldItem</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4391</span> </span><span class="WHIT">    </span><span class="NAME">this.renderQueue.show.push</span><span class="PUNC">(</span><span class="NAME">newItem</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4392</span> 
<span class='line'>4393</span> </span><span class="WHIT">    </span><span class="COMM">// update the original data table</span><span class="WHIT">
<span class='line'>4394</span> </span><span class="WHIT">    </span><span class="NAME">this.updateData</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">itemData</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4395</span> 
<span class='line'>4396</span> </span><span class="WHIT">    </span><span class="COMM">// prepare data for clustering, by filtering and sorting by type</span><span class="WHIT">
<span class='line'>4397</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.options.cluster</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4398</span> </span><span class="WHIT">        </span><span class="NAME">this.clusterGenerator.updateData</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4399</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4400</span> 
<span class='line'>4401</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">preventRender</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4402</span> </span><span class="WHIT">        </span><span class="COMM">// redraw timeline</span><span class="WHIT">
<span class='line'>4403</span> </span><span class="WHIT">        </span><span class="NAME">this.render</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4404</span> </span><span class="WHIT">            </span><span class="NAME">animate</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="WHIT">
<span class='line'>4405</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4406</span> 
<span class='line'>4407</span> </span><span class="WHIT">        </span><span class="NAME">newItem.select</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4408</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4409</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4410</span> 
<span class='line'>4411</span> </span><span class="COMM">/**
<span class='line'>4412</span>  * Delete all groups
<span class='line'>4413</span>  */</span><span class="WHIT">
<span class='line'>4414</span> </span><span class="NAME">links.Timeline.prototype.deleteGroups</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4415</span> </span><span class="WHIT">    </span><span class="NAME">this.groups</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4416</span> </span><span class="WHIT">    </span><span class="NAME">this.groupIndexes</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4417</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4418</span> 
<span class='line'>4419</span> 
<span class='line'>4420</span> </span><span class="COMM">/**
<span class='line'>4421</span>  * Get a group by the group name. When the group does not exist,
<span class='line'>4422</span>  * it will be created.
<span class='line'>4423</span>  * @param {String} groupName   the name of the group
<span class='line'>4424</span>  * @return {Object} groupObject
<span class='line'>4425</span>  */</span><span class="WHIT">
<span class='line'>4426</span> </span><span class="NAME">links.Timeline.prototype.getGroup</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">groupName</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4427</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">groups</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.groups</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4428</span> </span><span class="WHIT">        </span><span class="NAME">groupIndexes</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.groupIndexes</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4429</span> </span><span class="WHIT">        </span><span class="NAME">groupObj</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4430</span> 
<span class='line'>4431</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">groupIndex</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groupIndexes</span><span class="PUNC">[</span><span class="NAME">groupName</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4432</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">groupIndex</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">groupName</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT"> </span><span class="COMM">// not null or undefined</span><span class="WHIT">
<span class='line'>4433</span> </span><span class="WHIT">        </span><span class="NAME">groupObj</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4434</span> </span><span class="WHIT">            </span><span class="STRN">'content'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">groupName</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4435</span> </span><span class="WHIT">            </span><span class="STRN">'labelTop'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4436</span> </span><span class="WHIT">            </span><span class="STRN">'lineTop'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="WHIT">
<span class='line'>4437</span> </span><span class="WHIT">            </span><span class="COMM">// note: this object will lateron get addition information, </span><span class="WHIT">
<span class='line'>4438</span> </span><span class="WHIT">            </span><span class="COMM">//       such as height and width of the group         </span><span class="WHIT">
<span class='line'>4439</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4440</span> </span><span class="WHIT">        </span><span class="NAME">groups.push</span><span class="PUNC">(</span><span class="NAME">groupObj</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4441</span> </span><span class="WHIT">        </span><span class="COMM">// sort the groups</span><span class="WHIT">
<span class='line'>4442</span> </span><span class="WHIT">        </span><span class="NAME">groups</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups.sort</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">a</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">b</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4443</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">a.content</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">b.content</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4444</span> </span><span class="WHIT">                </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4445</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4446</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">a.content</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">b.content</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4447</span> </span><span class="WHIT">                </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4448</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4449</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4450</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4451</span> 
<span class='line'>4452</span> </span><span class="WHIT">        </span><span class="COMM">// rebuilt the groupIndexes</span><span class="WHIT">
<span class='line'>4453</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4454</span> </span><span class="WHIT">            </span><span class="NAME">groupIndexes</span><span class="PUNC">[</span><span class="NAME">groups</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">content</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4455</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4456</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4457</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4458</span> </span><span class="WHIT">        </span><span class="NAME">groupObj</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups</span><span class="PUNC">[</span><span class="NAME">groupIndex</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4459</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4460</span> 
<span class='line'>4461</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">groupObj</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4462</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4463</span> 
<span class='line'>4464</span> </span><span class="COMM">/**
<span class='line'>4465</span>  * Get the group name from a group object.
<span class='line'>4466</span>  * @param {Object} groupObj
<span class='line'>4467</span>  * @return {String} groupName   the name of the group, or undefined when group
<span class='line'>4468</span>  *                              was not provided
<span class='line'>4469</span>  */</span><span class="WHIT">
<span class='line'>4470</span> </span><span class="NAME">links.Timeline.prototype.getGroupName</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">groupObj</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4471</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">groupObj</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">groupObj.content</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4472</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4473</span> 
<span class='line'>4474</span> </span><span class="COMM">/**
<span class='line'>4475</span>  * Cancel a change item
<span class='line'>4476</span>  * This method can be called insed an event listener which catches the "change"
<span class='line'>4477</span>  * event. The changed event position will be undone.
<span class='line'>4478</span>  */</span><span class="WHIT">
<span class='line'>4479</span> </span><span class="NAME">links.Timeline.prototype.cancelChange</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4480</span> </span><span class="WHIT">    </span><span class="NAME">this.applyChange</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4481</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4482</span> 
<span class='line'>4483</span> </span><span class="COMM">/**
<span class='line'>4484</span>  * Cancel deletion of an item
<span class='line'>4485</span>  * This method can be called insed an event listener which catches the "delete"
<span class='line'>4486</span>  * event. Deletion of the event will be undone.
<span class='line'>4487</span>  */</span><span class="WHIT">
<span class='line'>4488</span> </span><span class="NAME">links.Timeline.prototype.cancelDelete</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4489</span> </span><span class="WHIT">    </span><span class="NAME">this.applyDelete</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4490</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4491</span> 
<span class='line'>4492</span> 
<span class='line'>4493</span> </span><span class="COMM">/**
<span class='line'>4494</span>  * Cancel creation of a new item
<span class='line'>4495</span>  * This method can be called insed an event listener which catches the "new"
<span class='line'>4496</span>  * event. Creation of the new the event will be undone.
<span class='line'>4497</span>  */</span><span class="WHIT">
<span class='line'>4498</span> </span><span class="NAME">links.Timeline.prototype.cancelAdd</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4499</span> </span><span class="WHIT">    </span><span class="NAME">this.applyAdd</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4500</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4501</span> 
<span class='line'>4502</span> 
<span class='line'>4503</span> </span><span class="COMM">/**
<span class='line'>4504</span>  * Select an event. The visible chart range will be moved such that the selected
<span class='line'>4505</span>  * event is placed in the middle.
<span class='line'>4506</span>  * For example selection = [{row: 5}];
<span class='line'>4507</span>  * @param {Array} selection   An array with a column row, containing the row
<span class='line'>4508</span>  *                           number (the id) of the event to be selected.
<span class='line'>4509</span>  * @return {boolean}         true if selection is succesfully set, else false.
<span class='line'>4510</span>  */</span><span class="WHIT">
<span class='line'>4511</span> </span><span class="NAME">links.Timeline.prototype.setSelection</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">selection</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4512</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">selection</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">selection.length</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4513</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">selection</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">row</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4514</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">selection</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">row</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4515</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.items</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4516</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.items</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4517</span> </span><span class="WHIT">                </span><span class="NAME">this.selectItem</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4518</span> 
<span class='line'>4519</span> </span><span class="WHIT">                </span><span class="COMM">// move the visible chart range to the selected event.</span><span class="WHIT">
<span class='line'>4520</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.start</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4521</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.end</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4522</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">middle</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// number</span><span class="WHIT">
<span class='line'>4523</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">end</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4524</span> </span><span class="WHIT">                    </span><span class="NAME">middle</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4525</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4526</span> </span><span class="WHIT">                    </span><span class="NAME">middle</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4527</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4528</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4529</span> </span><span class="WHIT">                    </span><span class="NAME">newStart</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">middle</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4530</span> </span><span class="WHIT">                    </span><span class="NAME">newEnd</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">middle</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4531</span> 
<span class='line'>4532</span> </span><span class="WHIT">                </span><span class="NAME">this.setVisibleChartRange</span><span class="PUNC">(</span><span class="NAME">newStart</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">newEnd</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4533</span> 
<span class='line'>4534</span> </span><span class="WHIT">                </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4535</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4536</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4537</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4538</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4539</span> </span><span class="WHIT">        </span><span class="COMM">// unselect current selection</span><span class="WHIT">
<span class='line'>4540</span> </span><span class="WHIT">        </span><span class="NAME">this.unselectItem</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4541</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4542</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4543</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4544</span> 
<span class='line'>4545</span> </span><span class="COMM">/**
<span class='line'>4546</span>  * Retrieve the currently selected event
<span class='line'>4547</span>  * @return {Array} sel  An array with a column row, containing the row number
<span class='line'>4548</span>  *                      of the selected event. If there is no selection, an
<span class='line'>4549</span>  *                      empty array is returned.
<span class='line'>4550</span>  */</span><span class="WHIT">
<span class='line'>4551</span> </span><span class="NAME">links.Timeline.prototype.getSelection</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4552</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">sel</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4553</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.selection</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4554</span> </span><span class="WHIT">        </span><span class="NAME">sel.push</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="STRN">"row"</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">this.selection.index</span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4555</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4556</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">sel</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4557</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4558</span> 
<span class='line'>4559</span> 
<span class='line'>4560</span> </span><span class="COMM">/**
<span class='line'>4561</span>  * Select an item by its index
<span class='line'>4562</span>  * @param {Number} index
<span class='line'>4563</span>  */</span><span class="WHIT">
<span class='line'>4564</span> </span><span class="NAME">links.Timeline.prototype.selectItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4565</span> </span><span class="WHIT">    </span><span class="NAME">this.unselectItem</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4566</span> 
<span class='line'>4567</span> </span><span class="WHIT">    </span><span class="NAME">this.selection</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4568</span> 
<span class='line'>4569</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.items</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4570</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.items</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4571</span> </span><span class="WHIT">            </span><span class="NAME">domItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4572</span> 
<span class='line'>4573</span> </span><span class="WHIT">        </span><span class="NAME">this.selection</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4574</span> </span><span class="WHIT">            </span><span class="STRN">'index'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">index</span><span class="WHIT">
<span class='line'>4575</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4576</span> 
<span class='line'>4577</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">item.dom</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4578</span> </span><span class="WHIT">            </span><span class="COMM">// TODO: move adjusting the domItem to the item itself</span><span class="WHIT">
<span class='line'>4579</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.isEditable</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4580</span> </span><span class="WHIT">                </span><span class="NAME">item.dom.style.cursor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'move'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4581</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4582</span> </span><span class="WHIT">            </span><span class="NAME">item.select</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4583</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4584</span> </span><span class="WHIT">        </span><span class="NAME">this.repaintDeleteButton</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4585</span> </span><span class="WHIT">        </span><span class="NAME">this.repaintDragAreas</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4586</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4587</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4588</span> 
<span class='line'>4589</span> </span><span class="COMM">/**
<span class='line'>4590</span>  * Check if an item is currently selected
<span class='line'>4591</span>  * @param {Number} index
<span class='line'>4592</span>  * @return {boolean} true if row is selected, else false
<span class='line'>4593</span>  */</span><span class="WHIT">
<span class='line'>4594</span> </span><span class="NAME">links.Timeline.prototype.isSelected</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4595</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.selection</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">this.selection.index</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">index</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4596</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4597</span> 
<span class='line'>4598</span> </span><span class="COMM">/**
<span class='line'>4599</span>  * Unselect the currently selected event (if any)
<span class='line'>4600</span>  */</span><span class="WHIT">
<span class='line'>4601</span> </span><span class="NAME">links.Timeline.prototype.unselectItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4602</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.selection</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4603</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.items</span><span class="PUNC">[</span><span class="NAME">this.selection.index</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4604</span> 
<span class='line'>4605</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">item.dom</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4606</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">domItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.dom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4607</span> </span><span class="WHIT">            </span><span class="NAME">domItem.style.cursor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4608</span> </span><span class="WHIT">            </span><span class="NAME">item.unselect</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4609</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4610</span> 
<span class='line'>4611</span> </span><span class="WHIT">        </span><span class="NAME">this.selection</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4612</span> </span><span class="WHIT">        </span><span class="NAME">this.repaintDeleteButton</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4613</span> </span><span class="WHIT">        </span><span class="NAME">this.repaintDragAreas</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4614</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4615</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4616</span> 
<span class='line'>4617</span> 
<span class='line'>4618</span> </span><span class="COMM">/**
<span class='line'>4619</span>  * Stack the items such that they don't overlap. The items will have a minimal
<span class='line'>4620</span>  * distance equal to options.eventMargin.
<span class='line'>4621</span>  * @param {boolean | undefined} animate    if animate is true, the items are
<span class='line'>4622</span>  *                                         moved to their new position animated
<span class='line'>4623</span>  *                                         defaults to false.
<span class='line'>4624</span>  */</span><span class="WHIT">
<span class='line'>4625</span> </span><span class="NAME">links.Timeline.prototype.stackItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">animate</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4626</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.groups.length</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4627</span> </span><span class="WHIT">        </span><span class="COMM">// under this conditions we refuse to stack the events</span><span class="WHIT">
<span class='line'>4628</span> </span><span class="WHIT">        </span><span class="COMM">// TODO: implement support for stacking items per group</span><span class="WHIT">
<span class='line'>4629</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4630</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4631</span> 
<span class='line'>4632</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">animate</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4633</span> </span><span class="WHIT">        </span><span class="NAME">animate</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4634</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4635</span> 
<span class='line'>4636</span> </span><span class="WHIT">    </span><span class="COMM">// calculate the order and final stack position of the items</span><span class="WHIT">
<span class='line'>4637</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">stack</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.stack</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4638</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">stack</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4639</span> </span><span class="WHIT">        </span><span class="NAME">stack</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4640</span> </span><span class="WHIT">        </span><span class="NAME">this.stack</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">stack</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4641</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4642</span> </span><span class="WHIT">    </span><span class="NAME">stack.sortedItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.stackOrder</span><span class="PUNC">(</span><span class="NAME">this.renderedItems</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4643</span> </span><span class="WHIT">    </span><span class="NAME">stack.finalItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.stackCalculateFinal</span><span class="PUNC">(</span><span class="NAME">stack.sortedItems</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4644</span> 
<span class='line'>4645</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">animate</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">stack.timer</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4646</span> </span><span class="WHIT">        </span><span class="COMM">// move animated to the final positions</span><span class="WHIT">
<span class='line'>4647</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">timeline</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4648</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4649</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">arrived</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">timeline.stackMoveOneStep</span><span class="PUNC">(</span><span class="NAME">stack.sortedItems</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4650</span> </span><span class="WHIT">                </span><span class="NAME">stack.finalItems</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4651</span> 
<span class='line'>4652</span> </span><span class="WHIT">            </span><span class="NAME">timeline.repaint</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4653</span> 
<span class='line'>4654</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">arrived</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4655</span> </span><span class="WHIT">                </span><span class="NAME">stack.timer</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">setTimeout</span><span class="PUNC">(</span><span class="NAME">step</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">30</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4656</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4657</span> </span><span class="WHIT">            </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4658</span> </span><span class="WHIT">                </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">stack.timer</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4659</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4660</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4661</span> 
<span class='line'>4662</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">stack.timer</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4663</span> </span><span class="WHIT">            </span><span class="NAME">stack.timer</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">setTimeout</span><span class="PUNC">(</span><span class="NAME">step</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">30</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4664</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4665</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4666</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4667</span> </span><span class="WHIT">        </span><span class="COMM">// move immediately to the final positions</span><span class="WHIT">
<span class='line'>4668</span> </span><span class="WHIT">        </span><span class="NAME">this.stackMoveToFinal</span><span class="PUNC">(</span><span class="NAME">stack.sortedItems</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">stack.finalItems</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4669</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4670</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4671</span> 
<span class='line'>4672</span> </span><span class="COMM">/**
<span class='line'>4673</span>  * Cancel any running animation
<span class='line'>4674</span>  */</span><span class="WHIT">
<span class='line'>4675</span> </span><span class="NAME">links.Timeline.prototype.stackCancelAnimation</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4676</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.stack</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">this.stack.timer</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4677</span> </span><span class="WHIT">        </span><span class="NAME">clearTimeout</span><span class="PUNC">(</span><span class="NAME">this.stack.timer</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4678</span> </span><span class="WHIT">        </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">this.stack.timer</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4679</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4680</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4681</span> 
<span class='line'>4682</span> 
<span class='line'>4683</span> </span><span class="COMM">/**
<span class='line'>4684</span>  * Order the items in the array this.items. The default order is determined via:
<span class='line'>4685</span>  * - Ranges go before boxes and dots.
<span class='line'>4686</span>  * - The item with the oldest start time goes first
<span class='line'>4687</span>  * If a custom function has been provided via the stackorder option, then this will be used.
<span class='line'>4688</span>  * @param {Array} items        Array with items
<span class='line'>4689</span>  * @return {Array} sortedItems Array with sorted items
<span class='line'>4690</span>  */</span><span class="WHIT">
<span class='line'>4691</span> </span><span class="NAME">links.Timeline.prototype.stackOrder</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">items</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4692</span> </span><span class="WHIT">    </span><span class="COMM">// TODO: store the sorted items, to have less work later on</span><span class="WHIT">
<span class='line'>4693</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">sortedItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">items.concat</span><span class="PUNC">(</span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4694</span> 
<span class='line'>4695</span> </span><span class="WHIT">    </span><span class="COMM">//if a customer stack order function exists, use it. </span><span class="WHIT">
<span class='line'>4696</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">f</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options.customStackOrder</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">typeof</span><span class="WHIT"> </span><span class="NAME">this.options.customStackOrder</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">'function'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">this.options.customStackOrder</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">a</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">b</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>4697</span> </span><span class="WHIT">    </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4698</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">(</span><span class="NAME">a</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">links.Timeline.ItemRange</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT">
<span class='line'>4699</span> </span><span class="WHIT">            </span><span class="PUNC">!</span><span class="PUNC">(</span><span class="NAME">b</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">links.Timeline.ItemRange</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4700</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4701</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4702</span> 
<span class='line'>4703</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="PUNC">(</span><span class="NAME">a</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">links.Timeline.ItemRange</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT">
<span class='line'>4704</span> </span><span class="WHIT">            </span><span class="PUNC">(</span><span class="NAME">b</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">links.Timeline.ItemRange</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4705</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4706</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4707</span> 
<span class='line'>4708</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">a.left</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">b.left</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4709</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4710</span> 
<span class='line'>4711</span> </span><span class="WHIT">    </span><span class="NAME">sortedItems.sort</span><span class="PUNC">(</span><span class="NAME">f</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4712</span> 
<span class='line'>4713</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">sortedItems</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4714</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4715</span> 
<span class='line'>4716</span> </span><span class="COMM">/**
<span class='line'>4717</span>  * Adjust vertical positions of the events such that they don't overlap each
<span class='line'>4718</span>  * other.
<span class='line'>4719</span>  * @param {timeline.Item[]} items
<span class='line'>4720</span>  * @return {Object[]} finalItems
<span class='line'>4721</span>  */</span><span class="WHIT">
<span class='line'>4722</span> </span><span class="NAME">links.Timeline.prototype.stackCalculateFinal</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">items</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4723</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4724</span> </span><span class="WHIT">        </span><span class="NAME">iMax</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4725</span> </span><span class="WHIT">        </span><span class="NAME">size</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.size</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4726</span> </span><span class="WHIT">        </span><span class="NAME">axisTop</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.axis.top</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4727</span> </span><span class="WHIT">        </span><span class="NAME">axisHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">size.axis.height</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4728</span> </span><span class="WHIT">        </span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4729</span> </span><span class="WHIT">        </span><span class="NAME">axisOnTop</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.axisOnTop</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4730</span> </span><span class="WHIT">        </span><span class="NAME">eventMargin</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.eventMargin</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4731</span> </span><span class="WHIT">        </span><span class="NAME">eventMarginAxis</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.eventMarginAxis</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4732</span> </span><span class="WHIT">        </span><span class="NAME">finalItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4733</span> 
<span class='line'>4734</span> </span><span class="WHIT">    </span><span class="COMM">// initialize final positions</span><span class="WHIT">
<span class='line'>4735</span> </span><span class="WHIT">    </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">items.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4736</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">items</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4737</span> </span><span class="WHIT">            </span><span class="NAME">top</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4738</span> </span><span class="WHIT">            </span><span class="NAME">bottom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4739</span> </span><span class="WHIT">            </span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.height</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4740</span> </span><span class="WHIT">            </span><span class="NAME">width</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.getWidth</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4741</span> </span><span class="WHIT">            </span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.getRight</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4742</span> </span><span class="WHIT">            </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">right</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">width</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4743</span> 
<span class='line'>4744</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">axisOnTop</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4745</span> </span><span class="WHIT">            </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">axisHeight</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">eventMarginAxis</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">eventMargin</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4746</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4747</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4748</span> </span><span class="WHIT">            </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">axisTop</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">height</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">eventMarginAxis</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">eventMargin</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4749</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4750</span> </span><span class="WHIT">        </span><span class="NAME">bottom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4751</span> 
<span class='line'>4752</span> </span><span class="WHIT">        </span><span class="NAME">finalItems</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4753</span> </span><span class="WHIT">            </span><span class="STRN">'left'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">left</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4754</span> </span><span class="WHIT">            </span><span class="STRN">'top'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">top</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4755</span> </span><span class="WHIT">            </span><span class="STRN">'right'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">right</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4756</span> </span><span class="WHIT">            </span><span class="STRN">'bottom'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">bottom</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4757</span> </span><span class="WHIT">            </span><span class="STRN">'height'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">height</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4758</span> </span><span class="WHIT">            </span><span class="STRN">'item'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">item</span><span class="WHIT">
<span class='line'>4759</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4760</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4761</span> 
<span class='line'>4762</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.options.stackEvents</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4763</span> </span><span class="WHIT">        </span><span class="COMM">// calculate new, non-overlapping positions</span><span class="WHIT">
<span class='line'>4764</span> </span><span class="WHIT">        </span><span class="COMM">//var items = sortedItems;</span><span class="WHIT">
<span class='line'>4765</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItems.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4766</span> </span><span class="WHIT">            </span><span class="COMM">//for (var i = finalItems.length - 1; i >= 0; i--) {</span><span class="WHIT">
<span class='line'>4767</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">finalItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItems</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4768</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">collidingItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4769</span> </span><span class="WHIT">            </span><span class="KEYW">do</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4770</span> </span><span class="WHIT">                </span><span class="COMM">// TODO: optimize checking for overlap. when there is a gap without items,</span><span class="WHIT">
<span class='line'>4771</span> </span><span class="WHIT">                </span><span class="COMM">//  you only need to check for items from the next item on, not from zero</span><span class="WHIT">
<span class='line'>4772</span> </span><span class="WHIT">                </span><span class="NAME">collidingItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.stackItemsCheckOverlap</span><span class="PUNC">(</span><span class="NAME">finalItems</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4773</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">collidingItem</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4774</span> </span><span class="WHIT">                    </span><span class="COMM">// There is a collision. Reposition the event above the colliding element</span><span class="WHIT">
<span class='line'>4775</span> </span><span class="WHIT">                    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">axisOnTop</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4776</span> </span><span class="WHIT">                        </span><span class="NAME">finalItem.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">collidingItem.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">collidingItem.height</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">eventMargin</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4777</span> </span><span class="WHIT">                    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4778</span> </span><span class="WHIT">                    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4779</span> </span><span class="WHIT">                        </span><span class="NAME">finalItem.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">collidingItem.top</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">finalItem.height</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">eventMargin</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4780</span> </span><span class="WHIT">                    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4781</span> </span><span class="WHIT">                    </span><span class="NAME">finalItem.bottom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItem.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">finalItem.height</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4782</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4783</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT"> </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">collidingItem</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4784</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4785</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4786</span> 
<span class='line'>4787</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">finalItems</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4788</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4789</span> 
<span class='line'>4790</span> 
<span class='line'>4791</span> </span><span class="COMM">/**
<span class='line'>4792</span>  * Move the events one step in the direction of their final positions
<span class='line'>4793</span>  * @param {Array} currentItems   Array with the real items and their current
<span class='line'>4794</span>  *                               positions
<span class='line'>4795</span>  * @param {Array} finalItems     Array with objects containing the final
<span class='line'>4796</span>  *                               positions of the items
<span class='line'>4797</span>  * @return {boolean} arrived     True if all items have reached their final
<span class='line'>4798</span>  *                               location, else false
<span class='line'>4799</span>  */</span><span class="WHIT">
<span class='line'>4800</span> </span><span class="NAME">links.Timeline.prototype.stackMoveOneStep</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">currentItems</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">finalItems</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4801</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">arrived</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4802</span> 
<span class='line'>4803</span> </span><span class="WHIT">    </span><span class="COMM">// apply new positions animated</span><span class="WHIT">
<span class='line'>4804</span> </span><span class="WHIT">    </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItems.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4805</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">finalItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItems</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4806</span> </span><span class="WHIT">            </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItem.item</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4807</span> 
<span class='line'>4808</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">topNow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">parseInt</span><span class="PUNC">(</span><span class="NAME">item.top</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4809</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">topFinal</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">parseInt</span><span class="PUNC">(</span><span class="NAME">finalItem.top</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4810</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">topFinal</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">topNow</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4811</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">diff</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4812</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">topFinal</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">topNow</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">(</span><span class="NAME">topFinal</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">topNow</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4813</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">Math.abs</span><span class="PUNC">(</span><span class="NAME">diff</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NUMB">4</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">diff</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">4</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4814</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">topNew</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">parseInt</span><span class="PUNC">(</span><span class="NAME">topNow</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4815</span> 
<span class='line'>4816</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">topNew</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">topFinal</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4817</span> </span><span class="WHIT">                </span><span class="NAME">arrived</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4818</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4819</span> 
<span class='line'>4820</span> </span><span class="WHIT">            </span><span class="NAME">item.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">topNew</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4821</span> </span><span class="WHIT">            </span><span class="NAME">item.bottom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">item.height</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4822</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4823</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4824</span> </span><span class="WHIT">            </span><span class="NAME">item.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItem.top</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4825</span> </span><span class="WHIT">            </span><span class="NAME">item.bottom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItem.bottom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4826</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4827</span> 
<span class='line'>4828</span> </span><span class="WHIT">        </span><span class="NAME">item.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItem.left</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4829</span> </span><span class="WHIT">        </span><span class="NAME">item.right</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItem.right</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4830</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4831</span> 
<span class='line'>4832</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">arrived</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4833</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4834</span> 
<span class='line'>4835</span> 
<span class='line'>4836</span> 
<span class='line'>4837</span> </span><span class="COMM">/**
<span class='line'>4838</span>  * Move the events from their current position to the final position
<span class='line'>4839</span>  * @param {Array} currentItems   Array with the real items and their current
<span class='line'>4840</span>  *                               positions
<span class='line'>4841</span>  * @param {Array} finalItems     Array with objects containing the final
<span class='line'>4842</span>  *                               positions of the items
<span class='line'>4843</span>  */</span><span class="WHIT">
<span class='line'>4844</span> </span><span class="NAME">links.Timeline.prototype.stackMoveToFinal</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">currentItems</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">finalItems</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4845</span> </span><span class="WHIT">    </span><span class="COMM">// Put the events directly at there final position</span><span class="WHIT">
<span class='line'>4846</span> </span><span class="WHIT">    </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItems.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4847</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">finalItem</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItems</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4848</span> </span><span class="WHIT">            </span><span class="NAME">current</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItem.item</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4849</span> 
<span class='line'>4850</span> </span><span class="WHIT">        </span><span class="NAME">current.left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItem.left</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4851</span> </span><span class="WHIT">        </span><span class="NAME">current.top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItem.top</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4852</span> </span><span class="WHIT">        </span><span class="NAME">current.right</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItem.right</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4853</span> </span><span class="WHIT">        </span><span class="NAME">current.bottom</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">finalItem.bottom</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4854</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4855</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4856</span> 
<span class='line'>4857</span> 
<span class='line'>4858</span> 
<span class='line'>4859</span> </span><span class="COMM">/**
<span class='line'>4860</span>  * Check if the destiny position of given item overlaps with any
<span class='line'>4861</span>  * of the other items from index itemStart to itemEnd.
<span class='line'>4862</span>  * @param {Array} items      Array with items
<span class='line'>4863</span>  * @param {int}  itemIndex   Number of the item to be checked for overlap
<span class='line'>4864</span>  * @param {int}  itemStart   First item to be checked.
<span class='line'>4865</span>  * @param {int}  itemEnd     Last item to be checked.
<span class='line'>4866</span>  * @return {Object}          colliding item, or undefined when no collisions
<span class='line'>4867</span>  */</span><span class="WHIT">
<span class='line'>4868</span> </span><span class="NAME">links.Timeline.prototype.stackItemsCheckOverlap</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">items</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">itemIndex</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4869</span> </span><span class="WHIT">                                                           </span><span class="NAME">itemStart</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">itemEnd</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4870</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">eventMargin</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.options.eventMargin</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4871</span> </span><span class="WHIT">        </span><span class="NAME">collision</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.collision</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4872</span> 
<span class='line'>4873</span> </span><span class="WHIT">    </span><span class="COMM">// we loop from end to start, as we suppose that the chance of a </span><span class="WHIT">
<span class='line'>4874</span> </span><span class="WHIT">    </span><span class="COMM">// collision is larger for items at the end, so check these first.</span><span class="WHIT">
<span class='line'>4875</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item1</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">items</span><span class="PUNC">[</span><span class="NAME">itemIndex</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4876</span> </span><span class="WHIT">    </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">itemEnd</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">>=</span><span class="WHIT"> </span><span class="NAME">itemStart</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">--</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4877</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item2</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">items</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4878</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">collision</span><span class="PUNC">(</span><span class="NAME">item1</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">item2</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">eventMargin</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4879</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">itemIndex</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4880</span> </span><span class="WHIT">                </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">item2</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4881</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4882</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4883</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4884</span> 
<span class='line'>4885</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4886</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4887</span> 
<span class='line'>4888</span> </span><span class="COMM">/**
<span class='line'>4889</span>  * Test if the two provided items collide
<span class='line'>4890</span>  * The items must have parameters left, right, top, and bottom.
<span class='line'>4891</span>  * @param {Element} item1       The first item
<span class='line'>4892</span>  * @param {Element} item2       The second item
<span class='line'>4893</span>  * @param {Number}              margin  A minimum required margin. Optional.
<span class='line'>4894</span>  *                              If margin is provided, the two items will be
<span class='line'>4895</span>  *                              marked colliding when they overlap or
<span class='line'>4896</span>  *                              when the margin between the two is smaller than
<span class='line'>4897</span>  *                              the requested margin.
<span class='line'>4898</span>  * @return {boolean}            true if item1 and item2 collide, else false
<span class='line'>4899</span>  */</span><span class="WHIT">
<span class='line'>4900</span> </span><span class="NAME">links.Timeline.prototype.collision</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">item1</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">item2</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">margin</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4901</span> </span><span class="WHIT">    </span><span class="COMM">// set margin if not specified </span><span class="WHIT">
<span class='line'>4902</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">margin</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4903</span> </span><span class="WHIT">        </span><span class="NAME">margin</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4904</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4905</span> 
<span class='line'>4906</span> </span><span class="WHIT">    </span><span class="COMM">// calculate if there is overlap (collision)</span><span class="WHIT">
<span class='line'>4907</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item1.left</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">margin</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">item2.right</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT">
<span class='line'>4908</span> </span><span class="WHIT">        </span><span class="NAME">item1.right</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">margin</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">item2.left</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT">
<span class='line'>4909</span> </span><span class="WHIT">        </span><span class="NAME">item1.top</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">margin</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">item2.bottom</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT">
<span class='line'>4910</span> </span><span class="WHIT">        </span><span class="NAME">item1.bottom</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">margin</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">item2.top</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4911</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4912</span> 
<span class='line'>4913</span> 
<span class='line'>4914</span> </span><span class="COMM">/**
<span class='line'>4915</span>  * fire an event
<span class='line'>4916</span>  * @param {String} event   The name of an event, for example "rangechange" or "edit"
<span class='line'>4917</span>  */</span><span class="WHIT">
<span class='line'>4918</span> </span><span class="NAME">links.Timeline.prototype.trigger</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4919</span> </span><span class="WHIT">    </span><span class="COMM">// built up properties</span><span class="WHIT">
<span class='line'>4920</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">properties</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4921</span> </span><span class="WHIT">    </span><span class="KEYW">switch</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4922</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="STRN">'rangechange'</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>4923</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="STRN">'rangechanged'</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>4924</span> </span><span class="WHIT">            </span><span class="NAME">properties</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4925</span> </span><span class="WHIT">                </span><span class="STRN">'start'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4926</span> </span><span class="WHIT">                </span><span class="STRN">'end'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>4927</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4928</span> </span><span class="WHIT">            </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4929</span> 
<span class='line'>4930</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="STRN">'timechange'</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>4931</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="STRN">'timechanged'</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>4932</span> </span><span class="WHIT">            </span><span class="NAME">properties</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4933</span> </span><span class="WHIT">                </span><span class="STRN">'time'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.customTime.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>4934</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4935</span> </span><span class="WHIT">            </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4936</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4937</span> 
<span class='line'>4938</span> </span><span class="WHIT">    </span><span class="COMM">// trigger the links event bus</span><span class="WHIT">
<span class='line'>4939</span> </span><span class="WHIT">    </span><span class="NAME">links.events.trigger</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">event</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">properties</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4940</span> 
<span class='line'>4941</span> </span><span class="WHIT">    </span><span class="COMM">// trigger the google event bus</span><span class="WHIT">
<span class='line'>4942</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">google</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">google.visualization</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4943</span> </span><span class="WHIT">        </span><span class="NAME">google.visualization.events.trigger</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">event</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">properties</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4944</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4945</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4946</span> 
<span class='line'>4947</span> 
<span class='line'>4948</span> </span><span class="COMM">/**
<span class='line'>4949</span>  * Cluster the events
<span class='line'>4950</span>  */</span><span class="WHIT">
<span class='line'>4951</span> </span><span class="NAME">links.Timeline.prototype.clusterItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4952</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">this.options.cluster</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4953</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4954</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4955</span> 
<span class='line'>4956</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">clusters</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.clusterGenerator.getClusters</span><span class="PUNC">(</span><span class="NAME">this.conversion.factor</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4957</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.clusters</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">clusters</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4958</span> </span><span class="WHIT">        </span><span class="COMM">// cluster level changed</span><span class="WHIT">
<span class='line'>4959</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">queue</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.renderQueue</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4960</span> 
<span class='line'>4961</span> </span><span class="WHIT">        </span><span class="COMM">// remove the old clusters from the scene</span><span class="WHIT">
<span class='line'>4962</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.clusters</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4963</span> </span><span class="WHIT">            </span><span class="NAME">this.clusters.forEach</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">cluster</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4964</span> </span><span class="WHIT">                </span><span class="NAME">queue.hide.push</span><span class="PUNC">(</span><span class="NAME">cluster</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4965</span> 
<span class='line'>4966</span> </span><span class="WHIT">                </span><span class="COMM">// unlink the items</span><span class="WHIT">
<span class='line'>4967</span> </span><span class="WHIT">                </span><span class="NAME">cluster.items.forEach</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4968</span> </span><span class="WHIT">                    </span><span class="NAME">item.cluster</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4969</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4970</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4971</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4972</span> 
<span class='line'>4973</span> </span><span class="WHIT">        </span><span class="COMM">// append the new clusters</span><span class="WHIT">
<span class='line'>4974</span> </span><span class="WHIT">        </span><span class="NAME">clusters.forEach</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">cluster</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4975</span> </span><span class="WHIT">            </span><span class="COMM">// don't add to the queue.show here, will be done in .filterItems()</span><span class="WHIT">
<span class='line'>4976</span> 
<span class='line'>4977</span> </span><span class="WHIT">            </span><span class="COMM">// link all items to the cluster</span><span class="WHIT">
<span class='line'>4978</span> </span><span class="WHIT">            </span><span class="NAME">cluster.items.forEach</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4979</span> </span><span class="WHIT">                </span><span class="NAME">item.cluster</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">cluster</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4980</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4981</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4982</span> 
<span class='line'>4983</span> </span><span class="WHIT">        </span><span class="NAME">this.clusters</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">clusters</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4984</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>4985</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4986</span> 
<span class='line'>4987</span> </span><span class="COMM">/**
<span class='line'>4988</span>  * Filter the visible events
<span class='line'>4989</span>  */</span><span class="WHIT">
<span class='line'>4990</span> </span><span class="NAME">links.Timeline.prototype.filterItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4991</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">queue</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.renderQueue</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4992</span> </span><span class="WHIT">        </span><span class="NAME">window</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.end</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.start</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4993</span> </span><span class="WHIT">        </span><span class="NAME">start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">window</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>4994</span> </span><span class="WHIT">        </span><span class="NAME">end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">window</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4995</span> 
<span class='line'>4996</span> </span><span class="WHIT">    </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">filter</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">arr</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4997</span> </span><span class="WHIT">        </span><span class="NAME">arr.forEach</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>4998</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">rendered</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.rendered</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>4999</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">visible</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.isVisible</span><span class="PUNC">(</span><span class="NAME">start</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5000</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">rendered</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">visible</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5001</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">rendered</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5002</span> </span><span class="WHIT">                    </span><span class="NAME">queue.hide.push</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// item is rendered but no longer visible</span><span class="WHIT">
<span class='line'>5003</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5004</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">visible</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">queue.show.indexOf</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5005</span> </span><span class="WHIT">                    </span><span class="NAME">queue.show.push</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// item is visible but neither rendered nor queued up to be rendered</span><span class="WHIT">
<span class='line'>5006</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5007</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5008</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5009</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5010</span> 
<span class='line'>5011</span> </span><span class="WHIT">    </span><span class="COMM">// filter all items and all clusters</span><span class="WHIT">
<span class='line'>5012</span> </span><span class="WHIT">    </span><span class="NAME">filter</span><span class="PUNC">(</span><span class="NAME">this.items</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5013</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.clusters</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5014</span> </span><span class="WHIT">        </span><span class="NAME">filter</span><span class="PUNC">(</span><span class="NAME">this.clusters</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5015</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5016</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5017</span> 
<span class='line'>5018</span> </span><span class="COMM">/** ------------------------------------------------------------------------ **/</span><span class="WHIT">
<span class='line'>5019</span> 
<span class='line'>5020</span> </span><span class="COMM">/**
<span class='line'>5021</span>  * @constructor links.Timeline.ClusterGenerator
<span class='line'>5022</span>  * Generator which creates clusters of items, based on the visible range in
<span class='line'>5023</span>  * the Timeline. There is a set of cluster levels which is cached.
<span class='line'>5024</span>  * @param {links.Timeline} timeline
<span class='line'>5025</span>  */</span><span class="WHIT">
<span class='line'>5026</span> </span><span class="NAME">links.Timeline.ClusterGenerator</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">timeline</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5027</span> </span><span class="WHIT">    </span><span class="NAME">this.timeline</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">timeline</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5028</span> </span><span class="WHIT">    </span><span class="NAME">this.clear</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5029</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5030</span> 
<span class='line'>5031</span> </span><span class="COMM">/**
<span class='line'>5032</span>  * Clear all cached clusters and data, and initialize all variables
<span class='line'>5033</span>  */</span><span class="WHIT">
<span class='line'>5034</span> </span><span class="NAME">links.Timeline.ClusterGenerator.prototype.clear</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5035</span> </span><span class="WHIT">    </span><span class="COMM">// cache containing created clusters for each cluster level</span><span class="WHIT">
<span class='line'>5036</span> </span><span class="WHIT">    </span><span class="NAME">this.items</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5037</span> </span><span class="WHIT">    </span><span class="NAME">this.groups</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5038</span> </span><span class="WHIT">    </span><span class="NAME">this.clearCache</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5039</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5040</span> 
<span class='line'>5041</span> </span><span class="COMM">/**
<span class='line'>5042</span>  * Clear the cached clusters
<span class='line'>5043</span>  */</span><span class="WHIT">
<span class='line'>5044</span> </span><span class="NAME">links.Timeline.ClusterGenerator.prototype.clearCache</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5045</span> </span><span class="WHIT">    </span><span class="COMM">// cache containing created clusters for each cluster level</span><span class="WHIT">
<span class='line'>5046</span> </span><span class="WHIT">    </span><span class="NAME">this.cache</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5047</span> </span><span class="WHIT">    </span><span class="NAME">this.cacheLevel</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5048</span> </span><span class="WHIT">    </span><span class="NAME">this.cache</span><span class="PUNC">[</span><span class="NAME">this.cacheLevel</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5049</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5050</span> 
<span class='line'>5051</span> </span><span class="COMM">/**
<span class='line'>5052</span>  * Set the items to be clustered.
<span class='line'>5053</span>  * This will clear cached clusters.
<span class='line'>5054</span>  * @param {Item[]} items
<span class='line'>5055</span>  * @param {Object} [options]  Available options:
<span class='line'>5056</span>  *                            {boolean} applyOnChangedLevel
<span class='line'>5057</span>  *                                If true (default), the changed data is applied
<span class='line'>5058</span>  *                                as soon the cluster level changes. If false,
<span class='line'>5059</span>  *                                The changed data is applied immediately
<span class='line'>5060</span>  */</span><span class="WHIT">
<span class='line'>5061</span> </span><span class="NAME">links.Timeline.ClusterGenerator.prototype.setData</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">items</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">options</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5062</span> </span><span class="WHIT">    </span><span class="NAME">this.items</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">items</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5063</span> </span><span class="WHIT">    </span><span class="NAME">this.dataChanged</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5064</span> </span><span class="WHIT">    </span><span class="NAME">this.applyOnChangedLevel</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5065</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">options</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">options.applyOnChangedLevel</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5066</span> </span><span class="WHIT">        </span><span class="NAME">this.applyOnChangedLevel</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">options.applyOnChangedLevel</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5067</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5068</span> </span><span class="WHIT">    </span><span class="COMM">// console.log('clustergenerator setData applyOnChangedLevel=' + this.applyOnChangedLevel); // TODO: cleanup</span><span class="WHIT">
<span class='line'>5069</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5070</span> 
<span class='line'>5071</span> </span><span class="COMM">/**
<span class='line'>5072</span>  * Update the current data set: clear cache, and recalculate the clustering for
<span class='line'>5073</span>  * the current level
<span class='line'>5074</span>  */</span><span class="WHIT">
<span class='line'>5075</span> </span><span class="NAME">links.Timeline.ClusterGenerator.prototype.updateData</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5076</span> </span><span class="WHIT">    </span><span class="NAME">this.dataChanged</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5077</span> </span><span class="WHIT">    </span><span class="NAME">this.applyOnChangedLevel</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5078</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5079</span> 
<span class='line'>5080</span> </span><span class="COMM">/**
<span class='line'>5081</span>  * Filter the items per group.
<span class='line'>5082</span>  * @private
<span class='line'>5083</span>  */</span><span class="WHIT">
<span class='line'>5084</span> </span><span class="NAME">links.Timeline.ClusterGenerator.prototype.filterData</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5085</span> </span><span class="WHIT">    </span><span class="COMM">// filter per group</span><span class="WHIT">
<span class='line'>5086</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">items</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.items</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5087</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">groups</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5088</span> </span><span class="WHIT">    </span><span class="NAME">this.groups</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5089</span> 
<span class='line'>5090</span> </span><span class="WHIT">    </span><span class="COMM">// split the items per group</span><span class="WHIT">
<span class='line'>5091</span> </span><span class="WHIT">    </span><span class="NAME">items.forEach</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5092</span> </span><span class="WHIT">        </span><span class="COMM">// put the item in the correct group</span><span class="WHIT">
<span class='line'>5093</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">groupName</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.group</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">item.group.content</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5094</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">groups</span><span class="PUNC">[</span><span class="NAME">groupName</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5095</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">group</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5096</span> </span><span class="WHIT">            </span><span class="NAME">group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5097</span> </span><span class="WHIT">            </span><span class="NAME">groups</span><span class="PUNC">[</span><span class="NAME">groupName</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">group</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5098</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5099</span> </span><span class="WHIT">        </span><span class="NAME">group.push</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5100</span> 
<span class='line'>5101</span> </span><span class="WHIT">        </span><span class="COMM">// calculate the center of the item</span><span class="WHIT">
<span class='line'>5102</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item.start</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5103</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item.end</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5104</span> </span><span class="WHIT">                </span><span class="COMM">// range</span><span class="WHIT">
<span class='line'>5105</span> </span><span class="WHIT">                </span><span class="NAME">item.center</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">item.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5106</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5107</span> </span><span class="WHIT">            </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5108</span> </span><span class="WHIT">                </span><span class="COMM">// box, dot</span><span class="WHIT">
<span class='line'>5109</span> </span><span class="WHIT">                </span><span class="NAME">item.center</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5110</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5111</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5112</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5113</span> 
<span class='line'>5114</span> </span><span class="WHIT">    </span><span class="COMM">// sort the items per group</span><span class="WHIT">
<span class='line'>5115</span> </span><span class="WHIT">    </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">groupName</span><span class="WHIT"> </span><span class="KEYW">in</span><span class="WHIT"> </span><span class="NAME">groups</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5116</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">groups.hasOwnProperty</span><span class="PUNC">(</span><span class="NAME">groupName</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5117</span> </span><span class="WHIT">            </span><span class="NAME">groups</span><span class="PUNC">[</span><span class="NAME">groupName</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">sort</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">a</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">b</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5118</span> </span><span class="WHIT">                </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">a.center</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">b.center</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5119</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5120</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5121</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5122</span> 
<span class='line'>5123</span> </span><span class="WHIT">    </span><span class="NAME">this.dataChanged</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5124</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5125</span> 
<span class='line'>5126</span> </span><span class="COMM">/**
<span class='line'>5127</span>  * Cluster the events which are too close together
<span class='line'>5128</span>  * @param {Number} scale     The scale of the current window,
<span class='line'>5129</span>  *                           defined as (windowWidth / (endDate - startDate))
<span class='line'>5130</span>  * @return {Item[]} clusters
<span class='line'>5131</span>  */</span><span class="WHIT">
<span class='line'>5132</span> </span><span class="NAME">links.Timeline.ClusterGenerator.prototype.getClusters</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">scale</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5133</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">level</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5134</span> </span><span class="WHIT">        </span><span class="NAME">granularity</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="COMM">// TODO: what granularity is needed for the cluster levels?</span><span class="WHIT">
<span class='line'>5135</span> </span><span class="WHIT">        </span><span class="NAME">timeWindow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">  </span><span class="COMM">// milliseconds</span><span class="WHIT">
<span class='line'>5136</span> </span><span class="WHIT">        </span><span class="NAME">maxItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">5</span><span class="PUNC">;</span><span class="WHIT">    </span><span class="COMM">// TODO: do not hard code maxItems</span><span class="WHIT">
<span class='line'>5137</span> 
<span class='line'>5138</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">scale</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5139</span> </span><span class="WHIT">        </span><span class="NAME">level</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">Math.log</span><span class="PUNC">(</span><span class="NUMB">100</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">scale</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">Math.log</span><span class="PUNC">(</span><span class="NAME">granularity</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5140</span> </span><span class="WHIT">        </span><span class="NAME">timeWindow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">Math.pow</span><span class="PUNC">(</span><span class="NAME">granularity</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">level</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5141</span> 
<span class='line'>5142</span> </span><span class="WHIT">        </span><span class="COMM">// groups must have a larger time window, as the items will not be stacked</span><span class="WHIT">
<span class='line'>5143</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.timeline.groups</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">this.timeline.groups.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5144</span> </span><span class="WHIT">            </span><span class="NAME">timeWindow</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">4</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5145</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5146</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5147</span> 
<span class='line'>5148</span> </span><span class="WHIT">    </span><span class="COMM">// clear the cache when and re-filter the data when needed.</span><span class="WHIT">
<span class='line'>5149</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.dataChanged</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5150</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">levelChanged</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">level</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">this.cacheLevel</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5151</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">applyDataNow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.applyOnChangedLevel</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">levelChanged</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5152</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">applyDataNow</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5153</span> </span><span class="WHIT">            </span><span class="COMM">// TODO: currently drawn clusters should be removed! mark them as invisible?</span><span class="WHIT">
<span class='line'>5154</span> </span><span class="WHIT">            </span><span class="NAME">this.clearCache</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5155</span> </span><span class="WHIT">            </span><span class="NAME">this.filterData</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5156</span> </span><span class="WHIT">            </span><span class="COMM">// console.log('clustergenerator: cache cleared...'); // TODO: cleanup</span><span class="WHIT">
<span class='line'>5157</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5158</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5159</span> 
<span class='line'>5160</span> </span><span class="WHIT">    </span><span class="NAME">this.cacheLevel</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">level</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5161</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">clusters</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.cache</span><span class="PUNC">[</span><span class="NAME">level</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5162</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">clusters</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5163</span> </span><span class="WHIT">        </span><span class="COMM">// console.log('clustergenerator: create cluster level ' + level); // TODO: cleanup</span><span class="WHIT">
<span class='line'>5164</span> </span><span class="WHIT">        </span><span class="NAME">clusters</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5165</span> 
<span class='line'>5166</span> </span><span class="WHIT">        </span><span class="COMM">// TODO: spit this method, it is too large</span><span class="WHIT">
<span class='line'>5167</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">groupName</span><span class="WHIT"> </span><span class="KEYW">in</span><span class="WHIT"> </span><span class="NAME">this.groups</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5168</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.groups.hasOwnProperty</span><span class="PUNC">(</span><span class="NAME">groupName</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5169</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">items</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.groups</span><span class="PUNC">[</span><span class="NAME">groupName</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5170</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">items.length</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5171</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5172</span> </span><span class="WHIT">                </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5173</span> </span><span class="WHIT">                    </span><span class="COMM">// find all items around current item, within the timeWindow</span><span class="WHIT">
<span class='line'>5174</span> </span><span class="WHIT">                    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">item</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">items</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5175</span> </span><span class="WHIT">                    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">neighbors</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="COMM">// start at 1, to include itself)</span><span class="WHIT">
<span class='line'>5176</span> 
<span class='line'>5177</span> </span><span class="WHIT">                    </span><span class="COMM">// loop through items left from the current item</span><span class="WHIT">
<span class='line'>5178</span> </span><span class="WHIT">                    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">j</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5179</span> </span><span class="WHIT">                    </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">j</span><span class="WHIT"> </span><span class="PUNC">>=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item.center</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">items</span><span class="PUNC">[</span><span class="NAME">j</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">center</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">timeWindow</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5180</span> </span><span class="WHIT">                        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">items</span><span class="PUNC">[</span><span class="NAME">j</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">cluster</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5181</span> </span><span class="WHIT">                            </span><span class="NAME">neighbors</span><span class="PUNC">++</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5182</span> </span><span class="WHIT">                        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5183</span> </span><span class="WHIT">                        </span><span class="NAME">j</span><span class="PUNC">--</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5184</span> </span><span class="WHIT">                    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5185</span> 
<span class='line'>5186</span> </span><span class="WHIT">                    </span><span class="COMM">// loop through items right from the current item</span><span class="WHIT">
<span class='line'>5187</span> </span><span class="WHIT">                    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">k</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5188</span> </span><span class="WHIT">                    </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">k</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">items.length</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">items</span><span class="PUNC">[</span><span class="NAME">k</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">center</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">item.center</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">timeWindow</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5189</span> </span><span class="WHIT">                        </span><span class="NAME">neighbors</span><span class="PUNC">++</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5190</span> </span><span class="WHIT">                        </span><span class="NAME">k</span><span class="PUNC">++</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5191</span> </span><span class="WHIT">                    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5192</span> 
<span class='line'>5193</span> </span><span class="WHIT">                    </span><span class="COMM">// loop through the created clusters</span><span class="WHIT">
<span class='line'>5194</span> </span><span class="WHIT">                    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">l</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">clusters.length</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5195</span> </span><span class="WHIT">                    </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">l</span><span class="WHIT"> </span><span class="PUNC">>=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item.center</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">clusters</span><span class="PUNC">[</span><span class="NAME">l</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">center</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">timeWindow</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5196</span> </span><span class="WHIT">                        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item.group</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">clusters</span><span class="PUNC">[</span><span class="NAME">l</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">group</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5197</span> </span><span class="WHIT">                            </span><span class="NAME">neighbors</span><span class="PUNC">++</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5198</span> </span><span class="WHIT">                        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5199</span> </span><span class="WHIT">                        </span><span class="NAME">l</span><span class="PUNC">--</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5200</span> </span><span class="WHIT">                    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5201</span> 
<span class='line'>5202</span> </span><span class="WHIT">                    </span><span class="COMM">// aggregate until the number of items is within maxItems</span><span class="WHIT">
<span class='line'>5203</span> </span><span class="WHIT">                    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">neighbors</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">maxItems</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5204</span> </span><span class="WHIT">                        </span><span class="COMM">// too busy in this window.</span><span class="WHIT">
<span class='line'>5205</span> </span><span class="WHIT">                        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">num</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">neighbors</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">maxItems</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5206</span> </span><span class="WHIT">                        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">clusterItems</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5207</span> 
<span class='line'>5208</span> </span><span class="WHIT">                        </span><span class="COMM">// append the items to the cluster,</span><span class="WHIT">
<span class='line'>5209</span> </span><span class="WHIT">                        </span><span class="COMM">// and calculate the average start for the cluster</span><span class="WHIT">
<span class='line'>5210</span> </span><span class="WHIT">                        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">avg</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="COMM">// number. average of all start dates</span><span class="WHIT">
<span class='line'>5211</span> </span><span class="WHIT">                        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="COMM">// number. minimum of all start dates</span><span class="WHIT">
<span class='line'>5212</span> </span><span class="WHIT">                        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="COMM">// number. maximum of all start and end dates</span><span class="WHIT">
<span class='line'>5213</span> </span><span class="WHIT">                        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">containsRanges</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5214</span> </span><span class="WHIT">                        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">count</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5215</span> </span><span class="WHIT">                        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">m</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5216</span> </span><span class="WHIT">                        </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">clusterItems.length</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">num</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">m</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">items.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5217</span> </span><span class="WHIT">                            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">p</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">items</span><span class="PUNC">[</span><span class="NAME">m</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5218</span> </span><span class="WHIT">                            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">p.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5219</span> </span><span class="WHIT">                            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">p.end</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">p.end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">p.start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5220</span> </span><span class="WHIT">                            </span><span class="NAME">clusterItems.push</span><span class="PUNC">(</span><span class="NAME">p</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5221</span> </span><span class="WHIT">                            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">count</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5222</span> </span><span class="WHIT">                                </span><span class="COMM">// calculate new average (use fractions to prevent overflow)</span><span class="WHIT">
<span class='line'>5223</span> </span><span class="WHIT">                                </span><span class="NAME">avg</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">count</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">count</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">avg</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NUMB">1</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">count</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">p.center</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5224</span> </span><span class="WHIT">                            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5225</span> </span><span class="WHIT">                            </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5226</span> </span><span class="WHIT">                                </span><span class="NAME">avg</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">p.center</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5227</span> </span><span class="WHIT">                            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5228</span> </span><span class="WHIT">                            </span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">min</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">Math.min</span><span class="PUNC">(</span><span class="NAME">min</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">start</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">start</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5229</span> </span><span class="WHIT">                            </span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">max</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">Math.max</span><span class="PUNC">(</span><span class="NAME">max</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5230</span> </span><span class="WHIT">                            </span><span class="NAME">containsRanges</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">containsRanges</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">p</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">links.Timeline.ItemRange</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5231</span> </span><span class="WHIT">                            </span><span class="NAME">count</span><span class="PUNC">++</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5232</span> </span><span class="WHIT">                            </span><span class="NAME">m</span><span class="PUNC">++</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5233</span> </span><span class="WHIT">                        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5234</span> 
<span class='line'>5235</span> </span><span class="WHIT">                        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">cluster</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5236</span> </span><span class="WHIT">                        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">title</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'Cluster containing '</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">count</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
<span class='line'>5237</span> </span><span class="WHIT">                            </span><span class="STRN">' events. Zoom in to see the individual events.'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5238</span> </span><span class="WHIT">                        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">content</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'&lt;div title="'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">title</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">'">'</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">count</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">' events&lt;/div>'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5239</span> </span><span class="WHIT">                        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">group</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">item.group</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">item.group.content</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5240</span> </span><span class="WHIT">                        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">containsRanges</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5241</span> </span><span class="WHIT">                            </span><span class="COMM">// boxes and/or ranges</span><span class="WHIT">
<span class='line'>5242</span> </span><span class="WHIT">                            </span><span class="NAME">cluster</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.timeline.createItem</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5243</span> </span><span class="WHIT">                                </span><span class="STRN">'start'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">min</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5244</span> </span><span class="WHIT">                                </span><span class="STRN">'end'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">max</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5245</span> </span><span class="WHIT">                                </span><span class="STRN">'content'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">content</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5246</span> </span><span class="WHIT">                                </span><span class="STRN">'group'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">group</span><span class="WHIT">
<span class='line'>5247</span> </span><span class="WHIT">                            </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5248</span> </span><span class="WHIT">                        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5249</span> </span><span class="WHIT">                        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5250</span> </span><span class="WHIT">                            </span><span class="COMM">// boxes only</span><span class="WHIT">
<span class='line'>5251</span> </span><span class="WHIT">                            </span><span class="NAME">cluster</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.timeline.createItem</span><span class="PUNC">(</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5252</span> </span><span class="WHIT">                                </span><span class="STRN">'start'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">avg</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5253</span> </span><span class="WHIT">                                </span><span class="STRN">'content'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">content</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5254</span> </span><span class="WHIT">                                </span><span class="STRN">'group'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">group</span><span class="WHIT">
<span class='line'>5255</span> </span><span class="WHIT">                            </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5256</span> </span><span class="WHIT">                        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5257</span> </span><span class="WHIT">                        </span><span class="NAME">cluster.isCluster</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5258</span> </span><span class="WHIT">                        </span><span class="NAME">cluster.items</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">clusterItems</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5259</span> </span><span class="WHIT">                        </span><span class="NAME">cluster.items.forEach</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5260</span> </span><span class="WHIT">                            </span><span class="NAME">item.cluster</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">cluster</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5261</span> </span><span class="WHIT">                        </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5262</span> 
<span class='line'>5263</span> </span><span class="WHIT">                        </span><span class="NAME">clusters.push</span><span class="PUNC">(</span><span class="NAME">cluster</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5264</span> </span><span class="WHIT">                        </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">num</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5265</span> </span><span class="WHIT">                    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5266</span> </span><span class="WHIT">                    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5267</span> </span><span class="WHIT">                        </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">item.cluster</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5268</span> </span><span class="WHIT">                        </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5269</span> </span><span class="WHIT">                    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5270</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5271</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5272</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5273</span> 
<span class='line'>5274</span> </span><span class="WHIT">        </span><span class="NAME">this.cache</span><span class="PUNC">[</span><span class="NAME">level</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">clusters</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5275</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5276</span> 
<span class='line'>5277</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">clusters</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5278</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5279</span> 
<span class='line'>5280</span> 
<span class='line'>5281</span> </span><span class="COMM">/** ------------------------------------------------------------------------ **/</span><span class="WHIT">
<span class='line'>5282</span> 
<span class='line'>5283</span> 
<span class='line'>5284</span> </span><span class="COMM">/**
<span class='line'>5285</span>  * Event listener (singleton)
<span class='line'>5286</span>  */</span><span class="WHIT">
<span class='line'>5287</span> </span><span class="NAME">links.events</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.events</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5288</span> </span><span class="WHIT">    </span><span class="STRN">'listeners'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5289</span> 
<span class='line'>5290</span> </span><span class="WHIT">    </span><span class="COMM">/**
<span class='line'>5291</span>      * Find a single listener by its object
<span class='line'>5292</span>      * @param {Object} object
<span class='line'>5293</span>      * @return {Number} index  -1 when not found
<span class='line'>5294</span>      */</span><span class="WHIT">
<span class='line'>5295</span> </span><span class="WHIT">    </span><span class="STRN">'indexOf'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">object</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5296</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">listeners</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.listeners</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5297</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.listeners.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5298</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">listener</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">listeners</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5299</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">listener</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">listener.object</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">object</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5300</span> </span><span class="WHIT">                </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5301</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5302</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5303</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5304</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5305</span> 
<span class='line'>5306</span> </span><span class="WHIT">    </span><span class="COMM">/**
<span class='line'>5307</span>      * Add an event listener
<span class='line'>5308</span>      * @param {Object} object
<span class='line'>5309</span>      * @param {String} event       The name of an event, for example 'select'
<span class='line'>5310</span>      * @param {function} callback  The callback method, called when the
<span class='line'>5311</span>      *                             event takes place
<span class='line'>5312</span>      */</span><span class="WHIT">
<span class='line'>5313</span> </span><span class="WHIT">    </span><span class="STRN">'addListener'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">object</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">event</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">callback</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5314</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.indexOf</span><span class="PUNC">(</span><span class="NAME">object</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5315</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">listener</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.listeners</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5316</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">listener</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5317</span> </span><span class="WHIT">            </span><span class="NAME">listener</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5318</span> </span><span class="WHIT">                </span><span class="STRN">'object'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">object</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5319</span> </span><span class="WHIT">                </span><span class="STRN">'events'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5320</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5321</span> </span><span class="WHIT">            </span><span class="NAME">this.listeners.push</span><span class="PUNC">(</span><span class="NAME">listener</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5322</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5323</span> 
<span class='line'>5324</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">callbacks</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">listener.events</span><span class="PUNC">[</span><span class="NAME">event</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5325</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">callbacks</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5326</span> </span><span class="WHIT">            </span><span class="NAME">callbacks</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5327</span> </span><span class="WHIT">            </span><span class="NAME">listener.events</span><span class="PUNC">[</span><span class="NAME">event</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">callbacks</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5328</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5329</span> 
<span class='line'>5330</span> </span><span class="WHIT">        </span><span class="COMM">// add the callback if it does not yet exist</span><span class="WHIT">
<span class='line'>5331</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">callbacks.indexOf</span><span class="PUNC">(</span><span class="NAME">callback</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5332</span> </span><span class="WHIT">            </span><span class="NAME">callbacks.push</span><span class="PUNC">(</span><span class="NAME">callback</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5333</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5334</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5335</span> 
<span class='line'>5336</span> </span><span class="WHIT">    </span><span class="COMM">/**
<span class='line'>5337</span>      * Remove an event listener
<span class='line'>5338</span>      * @param {Object} object
<span class='line'>5339</span>      * @param {String} event       The name of an event, for example 'select'
<span class='line'>5340</span>      * @param {function} callback  The registered callback method
<span class='line'>5341</span>      */</span><span class="WHIT">
<span class='line'>5342</span> </span><span class="WHIT">    </span><span class="STRN">'removeListener'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">object</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">event</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">callback</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5343</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.indexOf</span><span class="PUNC">(</span><span class="NAME">object</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5344</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">listener</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.listeners</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5345</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">listener</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5346</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">callbacks</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">listener.events</span><span class="PUNC">[</span><span class="NAME">event</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5347</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">callbacks</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5348</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">callbacks.indexOf</span><span class="PUNC">(</span><span class="NAME">callback</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5349</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5350</span> </span><span class="WHIT">                    </span><span class="NAME">callbacks.splice</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5351</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5352</span> 
<span class='line'>5353</span> </span><span class="WHIT">                </span><span class="COMM">// remove the array when empty</span><span class="WHIT">
<span class='line'>5354</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">callbacks.length</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5355</span> </span><span class="WHIT">                    </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">listener.events</span><span class="PUNC">[</span><span class="NAME">event</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5356</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5357</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5358</span> 
<span class='line'>5359</span> </span><span class="WHIT">            </span><span class="COMM">// count the number of registered events. remove listener when empty</span><span class="WHIT">
<span class='line'>5360</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">count</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5361</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">events</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">listener.events</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5362</span> </span><span class="WHIT">            </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">e</span><span class="WHIT"> </span><span class="KEYW">in</span><span class="WHIT"> </span><span class="NAME">events</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5363</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">events.hasOwnProperty</span><span class="PUNC">(</span><span class="NAME">e</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5364</span> </span><span class="WHIT">                    </span><span class="NAME">count</span><span class="PUNC">++</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5365</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5366</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5367</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">count</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5368</span> </span><span class="WHIT">                </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">this.listeners</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5369</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5370</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5371</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5372</span> 
<span class='line'>5373</span> </span><span class="WHIT">    </span><span class="COMM">/**
<span class='line'>5374</span>      * Remove all registered event listeners
<span class='line'>5375</span>      */</span><span class="WHIT">
<span class='line'>5376</span> </span><span class="WHIT">    </span><span class="STRN">'removeAllListeners'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5377</span> </span><span class="WHIT">        </span><span class="NAME">this.listeners</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5378</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5379</span> 
<span class='line'>5380</span> </span><span class="WHIT">    </span><span class="COMM">/**
<span class='line'>5381</span>      * Trigger an event. All registered event handlers will be called
<span class='line'>5382</span>      * @param {Object} object
<span class='line'>5383</span>      * @param {String} event
<span class='line'>5384</span>      * @param {Object} properties (optional)
<span class='line'>5385</span>      */</span><span class="WHIT">
<span class='line'>5386</span> </span><span class="WHIT">    </span><span class="STRN">'trigger'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">object</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">event</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">properties</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5387</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.indexOf</span><span class="PUNC">(</span><span class="NAME">object</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5388</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">listener</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.listeners</span><span class="PUNC">[</span><span class="NAME">index</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5389</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">listener</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5390</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">callbacks</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">listener.events</span><span class="PUNC">[</span><span class="NAME">event</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5391</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">callbacks</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5392</span> </span><span class="WHIT">                </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">callbacks.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">iMax</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5393</span> </span><span class="WHIT">                    </span><span class="NAME">callbacks</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">(</span><span class="NAME">properties</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5394</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5395</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5396</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5397</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5398</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5399</span> 
<span class='line'>5400</span> 
<span class='line'>5401</span> </span><span class="COMM">/** ------------------------------------------------------------------------ **/</span><span class="WHIT">
<span class='line'>5402</span> 
<span class='line'>5403</span> </span><span class="COMM">/**
<span class='line'>5404</span>  * @constructor  links.Timeline.StepDate
<span class='line'>5405</span>  * The class StepDate is an iterator for dates. You provide a start date and an
<span class='line'>5406</span>  * end date. The class itself determines the best scale (step size) based on the
<span class='line'>5407</span>  * provided start Date, end Date, and minimumStep.
<span class='line'>5408</span>  *
<span class='line'>5409</span>  * If minimumStep is provided, the step size is chosen as close as possible
<span class='line'>5410</span>  * to the minimumStep but larger than minimumStep. If minimumStep is not
<span class='line'>5411</span>  * provided, the scale is set to 1 DAY.
<span class='line'>5412</span>  * The minimumStep should correspond with the onscreen size of about 6 characters
<span class='line'>5413</span>  *
<span class='line'>5414</span>  * Alternatively, you can set a scale by hand.
<span class='line'>5415</span>  * After creation, you can initialize the class by executing start(). Then you
<span class='line'>5416</span>  * can iterate from the start date to the end date via next(). You can check if
<span class='line'>5417</span>  * the end date is reached with the function end(). After each step, you can
<span class='line'>5418</span>  * retrieve the current date via get().
<span class='line'>5419</span>  * The class step has scales ranging from milliseconds, seconds, minutes, hours,
<span class='line'>5420</span>  * days, to years.
<span class='line'>5421</span>  *
<span class='line'>5422</span>  * Version: 1.2
<span class='line'>5423</span>  *
<span class='line'>5424</span>  * @param {Date} start          The start date, for example new Date(2010, 9, 21)
<span class='line'>5425</span>  *                              or new Date(2010, 9, 21, 23, 45, 00)
<span class='line'>5426</span>  * @param {Date} end            The end date
<span class='line'>5427</span>  * @param {Number}  minimumStep Optional. Minimum step size in milliseconds
<span class='line'>5428</span>  */</span><span class="WHIT">
<span class='line'>5429</span> </span><span class="NAME">links.Timeline.StepDate</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">start</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5430</span> 
<span class='line'>5431</span> </span><span class="WHIT">    </span><span class="COMM">// variables</span><span class="WHIT">
<span class='line'>5432</span> </span><span class="WHIT">    </span><span class="NAME">this.current</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5433</span> </span><span class="WHIT">    </span><span class="NAME">this._start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5434</span> </span><span class="WHIT">    </span><span class="NAME">this._end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5435</span> 
<span class='line'>5436</span> </span><span class="WHIT">    </span><span class="NAME">this.autoScale</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5437</span> </span><span class="WHIT">    </span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.DAY</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5438</span> </span><span class="WHIT">    </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5439</span> 
<span class='line'>5440</span> </span><span class="WHIT">    </span><span class="COMM">// initialize the range</span><span class="WHIT">
<span class='line'>5441</span> </span><span class="WHIT">    </span><span class="NAME">this.setRange</span><span class="PUNC">(</span><span class="NAME">start</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5442</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5443</span> 
<span class='line'>5444</span> </span><span class="COMM">/// enum scale</span><span class="WHIT">
<span class='line'>5445</span> </span><span class="NAME">links.Timeline.StepDate.SCALE</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5446</span> </span><span class="WHIT">    </span><span class="NAME">MILLISECOND</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5447</span> </span><span class="WHIT">    </span><span class="NAME">SECOND</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5448</span> </span><span class="WHIT">    </span><span class="NAME">MINUTE</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">3</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5449</span> </span><span class="WHIT">    </span><span class="NAME">HOUR</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">4</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5450</span> </span><span class="WHIT">    </span><span class="NAME">DAY</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">5</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5451</span> </span><span class="WHIT">    </span><span class="NAME">WEEKDAY</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">6</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5452</span> </span><span class="WHIT">    </span><span class="NAME">MONTH</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">7</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5453</span> </span><span class="WHIT">    </span><span class="NAME">YEAR</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">8</span><span class="WHIT">
<span class='line'>5454</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5455</span> 
<span class='line'>5456</span> 
<span class='line'>5457</span> </span><span class="COMM">/**
<span class='line'>5458</span>  * Set a new range
<span class='line'>5459</span>  * If minimumStep is provided, the step size is chosen as close as possible
<span class='line'>5460</span>  * to the minimumStep but larger than minimumStep. If minimumStep is not
<span class='line'>5461</span>  * provided, the scale is set to 1 DAY.
<span class='line'>5462</span>  * The minimumStep should correspond with the onscreen size of about 6 characters
<span class='line'>5463</span>  * @param {Date} start        The start date and time.
<span class='line'>5464</span>  * @param {Date} end          The end date and time.
<span class='line'>5465</span>  * @param {int}  minimumStep  Optional. Minimum step size in milliseconds
<span class='line'>5466</span>  */</span><span class="WHIT">
<span class='line'>5467</span> </span><span class="NAME">links.Timeline.StepDate.prototype.setRange</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">start</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">end</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5468</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="PUNC">(</span><span class="NAME">start</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="PUNC">!</span><span class="PUNC">(</span><span class="NAME">end</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5469</span> </span><span class="WHIT">        </span><span class="COMM">//throw  "No legal start or end date in method setRange";</span><span class="WHIT">
<span class='line'>5470</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5471</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5472</span> 
<span class='line'>5473</span> </span><span class="WHIT">    </span><span class="NAME">this._start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">start</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5474</span> </span><span class="WHIT">    </span><span class="NAME">this._end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">end</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5475</span> 
<span class='line'>5476</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.autoScale</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5477</span> </span><span class="WHIT">        </span><span class="NAME">this.setMinimumStep</span><span class="PUNC">(</span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5478</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5479</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5480</span> 
<span class='line'>5481</span> </span><span class="COMM">/**
<span class='line'>5482</span>  * Set the step iterator to the start date.
<span class='line'>5483</span>  */</span><span class="WHIT">
<span class='line'>5484</span> </span><span class="NAME">links.Timeline.StepDate.prototype.start</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5485</span> </span><span class="WHIT">    </span><span class="NAME">this.current</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this._start.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5486</span> </span><span class="WHIT">    </span><span class="NAME">this.roundToMinor</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5487</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5488</span> 
<span class='line'>5489</span> </span><span class="COMM">/**
<span class='line'>5490</span>  * Round the current date to the first minor date value
<span class='line'>5491</span>  * This must be executed once when the current date is set to start Date
<span class='line'>5492</span>  */</span><span class="WHIT">
<span class='line'>5493</span> </span><span class="NAME">links.Timeline.StepDate.prototype.roundToMinor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5494</span> </span><span class="WHIT">    </span><span class="COMM">// round to floor</span><span class="WHIT">
<span class='line'>5495</span> </span><span class="WHIT">    </span><span class="COMM">// IMPORTANT: we have no breaks in this switch! (this is no bug)</span><span class="WHIT">
<span class='line'>5496</span> </span><span class="WHIT">    </span><span class="COMM">//noinspection FallthroughInSwitchStatementJS</span><span class="WHIT">
<span class='line'>5497</span> </span><span class="WHIT">    </span><span class="KEYW">switch</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.scale</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5498</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.YEAR</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5499</span> </span><span class="WHIT">            </span><span class="NAME">this.current.setFullYear</span><span class="PUNC">(</span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">Math.floor</span><span class="PUNC">(</span><span class="NAME">this.current.getFullYear</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5500</span> </span><span class="WHIT">            </span><span class="NAME">this.current.setMonth</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5501</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MONTH</span><span class="PUNC">:</span><span class="WHIT">        </span><span class="NAME">this.current.setDate</span><span class="PUNC">(</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5502</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.DAY</span><span class="PUNC">:</span><span class="WHIT">          </span><span class="COMM">// intentional fall through</span><span class="WHIT">
<span class='line'>5503</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.WEEKDAY</span><span class="PUNC">:</span><span class="WHIT">      </span><span class="NAME">this.current.setHours</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5504</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.HOUR</span><span class="PUNC">:</span><span class="WHIT">         </span><span class="NAME">this.current.setMinutes</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5505</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MINUTE</span><span class="PUNC">:</span><span class="WHIT">       </span><span class="NAME">this.current.setSeconds</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5506</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.SECOND</span><span class="PUNC">:</span><span class="WHIT">       </span><span class="NAME">this.current.setMilliseconds</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5507</span> </span><span class="WHIT">        </span><span class="COMM">//case links.Timeline.StepDate.SCALE.MILLISECOND: // nothing to do for milliseconds</span><span class="WHIT">
<span class='line'>5508</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5509</span> 
<span class='line'>5510</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5511</span> </span><span class="WHIT">        </span><span class="COMM">// round down to the first minor value that is a multiple of the current step size</span><span class="WHIT">
<span class='line'>5512</span> </span><span class="WHIT">        </span><span class="KEYW">switch</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.scale</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5513</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MILLISECOND</span><span class="PUNC">:</span><span class="WHIT">  </span><span class="NAME">this.current.setMilliseconds</span><span class="PUNC">(</span><span class="NAME">this.current.getMilliseconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.current.getMilliseconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">%</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5514</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.SECOND</span><span class="PUNC">:</span><span class="WHIT">       </span><span class="NAME">this.current.setSeconds</span><span class="PUNC">(</span><span class="NAME">this.current.getSeconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.current.getSeconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">%</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5515</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MINUTE</span><span class="PUNC">:</span><span class="WHIT">       </span><span class="NAME">this.current.setMinutes</span><span class="PUNC">(</span><span class="NAME">this.current.getMinutes</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.current.getMinutes</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">%</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5516</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.HOUR</span><span class="PUNC">:</span><span class="WHIT">         </span><span class="NAME">this.current.setHours</span><span class="PUNC">(</span><span class="NAME">this.current.getHours</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.current.getHours</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">%</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5517</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.WEEKDAY</span><span class="PUNC">:</span><span class="WHIT">      </span><span class="COMM">// intentional fall through</span><span class="WHIT">
<span class='line'>5518</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.DAY</span><span class="PUNC">:</span><span class="WHIT">          </span><span class="NAME">this.current.setDate</span><span class="PUNC">(</span><span class="PUNC">(</span><span class="NAME">this.current.getDate</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.current.getDate</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">%</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5519</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MONTH</span><span class="PUNC">:</span><span class="WHIT">        </span><span class="NAME">this.current.setMonth</span><span class="PUNC">(</span><span class="NAME">this.current.getMonth</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.current.getMonth</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">%</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5520</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.YEAR</span><span class="PUNC">:</span><span class="WHIT">         </span><span class="NAME">this.current.setFullYear</span><span class="PUNC">(</span><span class="NAME">this.current.getFullYear</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">this.current.getFullYear</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">%</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5521</span> </span><span class="WHIT">            </span><span class="KEYW">default</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5522</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5523</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5524</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5525</span> 
<span class='line'>5526</span> </span><span class="COMM">/**
<span class='line'>5527</span>  * Check if the end date is reached
<span class='line'>5528</span>  * @return {boolean}  true if the current date has passed the end date
<span class='line'>5529</span>  */</span><span class="WHIT">
<span class='line'>5530</span> </span><span class="NAME">links.Timeline.StepDate.prototype.end</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5531</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.current.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">this._end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5532</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5533</span> 
<span class='line'>5534</span> </span><span class="COMM">/**
<span class='line'>5535</span>  * Do the next step
<span class='line'>5536</span>  */</span><span class="WHIT">
<span class='line'>5537</span> </span><span class="NAME">links.Timeline.StepDate.prototype.next</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5538</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">prev</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.current.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5539</span> 
<span class='line'>5540</span> </span><span class="WHIT">    </span><span class="COMM">// Two cases, needed to prevent issues with switching daylight savings </span><span class="WHIT">
<span class='line'>5541</span> </span><span class="WHIT">    </span><span class="COMM">// (end of March and end of October)</span><span class="WHIT">
<span class='line'>5542</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.current.getMonth</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NUMB">6</span><span class="PUNC">)</span><span class="WHIT">   </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5543</span> </span><span class="WHIT">        </span><span class="KEYW">switch</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.scale</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5544</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MILLISECOND</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5545</span> 
<span class='line'>5546</span> </span><span class="WHIT">                </span><span class="NAME">this.current</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.current.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5547</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.SECOND</span><span class="PUNC">:</span><span class="WHIT">       </span><span class="NAME">this.current</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.current.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">1000</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5548</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MINUTE</span><span class="PUNC">:</span><span class="WHIT">       </span><span class="NAME">this.current</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.current.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">1000</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5549</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.HOUR</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5550</span> </span><span class="WHIT">                </span><span class="NAME">this.current</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.current.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">1000</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5551</span> </span><span class="WHIT">                </span><span class="COMM">// in case of skipping an hour for daylight savings, adjust the hour again (else you get: 0h 5h 9h ... instead of 0h 4h 8h ...)</span><span class="WHIT">
<span class='line'>5552</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">h</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.current.getHours</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5553</span> </span><span class="WHIT">                </span><span class="NAME">this.current.setHours</span><span class="PUNC">(</span><span class="NAME">h</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">h</span><span class="WHIT"> </span><span class="PUNC">%</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5554</span> </span><span class="WHIT">                </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5555</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.WEEKDAY</span><span class="PUNC">:</span><span class="WHIT">      </span><span class="COMM">// intentional fall through</span><span class="WHIT">
<span class='line'>5556</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.DAY</span><span class="PUNC">:</span><span class="WHIT">          </span><span class="NAME">this.current.setDate</span><span class="PUNC">(</span><span class="NAME">this.current.getDate</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5557</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MONTH</span><span class="PUNC">:</span><span class="WHIT">        </span><span class="NAME">this.current.setMonth</span><span class="PUNC">(</span><span class="NAME">this.current.getMonth</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5558</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.YEAR</span><span class="PUNC">:</span><span class="WHIT">         </span><span class="NAME">this.current.setFullYear</span><span class="PUNC">(</span><span class="NAME">this.current.getFullYear</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5559</span> </span><span class="WHIT">            </span><span class="KEYW">default</span><span class="PUNC">:</span><span class="WHIT">                      </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5560</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5561</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5562</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5563</span> </span><span class="WHIT">        </span><span class="KEYW">switch</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.scale</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5564</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MILLISECOND</span><span class="PUNC">:</span><span class="WHIT">  </span><span class="NAME">this.current</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this.current.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5565</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.SECOND</span><span class="PUNC">:</span><span class="WHIT">       </span><span class="NAME">this.current.setSeconds</span><span class="PUNC">(</span><span class="NAME">this.current.getSeconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5566</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MINUTE</span><span class="PUNC">:</span><span class="WHIT">       </span><span class="NAME">this.current.setMinutes</span><span class="PUNC">(</span><span class="NAME">this.current.getMinutes</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5567</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.HOUR</span><span class="PUNC">:</span><span class="WHIT">         </span><span class="NAME">this.current.setHours</span><span class="PUNC">(</span><span class="NAME">this.current.getHours</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5568</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.WEEKDAY</span><span class="PUNC">:</span><span class="WHIT">      </span><span class="COMM">// intentional fall through</span><span class="WHIT">
<span class='line'>5569</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.DAY</span><span class="PUNC">:</span><span class="WHIT">          </span><span class="NAME">this.current.setDate</span><span class="PUNC">(</span><span class="NAME">this.current.getDate</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5570</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MONTH</span><span class="PUNC">:</span><span class="WHIT">        </span><span class="NAME">this.current.setMonth</span><span class="PUNC">(</span><span class="NAME">this.current.getMonth</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5571</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.YEAR</span><span class="PUNC">:</span><span class="WHIT">         </span><span class="NAME">this.current.setFullYear</span><span class="PUNC">(</span><span class="NAME">this.current.getFullYear</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5572</span> </span><span class="WHIT">            </span><span class="KEYW">default</span><span class="PUNC">:</span><span class="WHIT">                      </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5573</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5574</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5575</span> 
<span class='line'>5576</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5577</span> </span><span class="WHIT">        </span><span class="COMM">// round down to the correct major value</span><span class="WHIT">
<span class='line'>5578</span> </span><span class="WHIT">        </span><span class="KEYW">switch</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.scale</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5579</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MILLISECOND</span><span class="PUNC">:</span><span class="WHIT">  </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">this.current.getMilliseconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">this.current.setMilliseconds</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5580</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.SECOND</span><span class="PUNC">:</span><span class="WHIT">       </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">this.current.getSeconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">this.current.setSeconds</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5581</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MINUTE</span><span class="PUNC">:</span><span class="WHIT">       </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">this.current.getMinutes</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">this.current.setMinutes</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5582</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.HOUR</span><span class="PUNC">:</span><span class="WHIT">         </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">this.current.getHours</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">this.current.setHours</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5583</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.WEEKDAY</span><span class="PUNC">:</span><span class="WHIT">      </span><span class="COMM">// intentional fall through</span><span class="WHIT">
<span class='line'>5584</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.DAY</span><span class="PUNC">:</span><span class="WHIT">          </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">this.current.getDate</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">+</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">this.current.setDate</span><span class="PUNC">(</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5585</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MONTH</span><span class="PUNC">:</span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">this.current.getMonth</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="NAME">this.current.setMonth</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5586</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.YEAR</span><span class="PUNC">:</span><span class="WHIT">         </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// nothing to do for year</span><span class="WHIT">
<span class='line'>5587</span> </span><span class="WHIT">            </span><span class="KEYW">default</span><span class="PUNC">:</span><span class="WHIT">                </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5588</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5589</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5590</span> 
<span class='line'>5591</span> </span><span class="WHIT">    </span><span class="COMM">// safety mechanism: if current time is still unchanged, move to the end</span><span class="WHIT">
<span class='line'>5592</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.current.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">prev</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5593</span> </span><span class="WHIT">        </span><span class="NAME">this.current</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="NAME">this._end.valueOf</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5594</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5595</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5596</span> 
<span class='line'>5597</span> 
<span class='line'>5598</span> </span><span class="COMM">/**
<span class='line'>5599</span>  * Get the current datetime
<span class='line'>5600</span>  * @return {Date}  current The current date
<span class='line'>5601</span>  */</span><span class="WHIT">
<span class='line'>5602</span> </span><span class="NAME">links.Timeline.StepDate.prototype.getCurrent</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5603</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">this.current</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5604</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5605</span> 
<span class='line'>5606</span> </span><span class="COMM">/**
<span class='line'>5607</span>  * Set a custom scale. Autoscaling will be disabled.
<span class='line'>5608</span>  * For example setScale(SCALE.MINUTES, 5) will result
<span class='line'>5609</span>  * in minor steps of 5 minutes, and major steps of an hour.
<span class='line'>5610</span>  *
<span class='line'>5611</span>  * @param {links.Timeline.StepDate.SCALE} newScale
<span class='line'>5612</span>  *                               A scale. Choose from SCALE.MILLISECOND,
<span class='line'>5613</span>  *                               SCALE.SECOND, SCALE.MINUTE, SCALE.HOUR,
<span class='line'>5614</span>  *                               SCALE.WEEKDAY, SCALE.DAY, SCALE.MONTH,
<span class='line'>5615</span>  *                               SCALE.YEAR.
<span class='line'>5616</span>  * @param {Number}     newStep   A step size, by default 1. Choose for
<span class='line'>5617</span>  *                               example 1, 2, 5, or 10.
<span class='line'>5618</span>  */</span><span class="WHIT">
<span class='line'>5619</span> </span><span class="NAME">links.Timeline.StepDate.prototype.setScale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">newScale</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">newStep</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5620</span> </span><span class="WHIT">    </span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">newScale</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5621</span> 
<span class='line'>5622</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">newStep</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5623</span> </span><span class="WHIT">        </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">newStep</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5624</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5625</span> 
<span class='line'>5626</span> </span><span class="WHIT">    </span><span class="NAME">this.autoScale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5627</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5628</span> 
<span class='line'>5629</span> </span><span class="COMM">/**
<span class='line'>5630</span>  * Enable or disable autoscaling
<span class='line'>5631</span>  * @param {boolean} enable  If true, autoascaling is set true
<span class='line'>5632</span>  */</span><span class="WHIT">
<span class='line'>5633</span> </span><span class="NAME">links.Timeline.StepDate.prototype.setAutoScale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">enable</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5634</span> </span><span class="WHIT">    </span><span class="NAME">this.autoScale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">enable</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5635</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5636</span> 
<span class='line'>5637</span> 
<span class='line'>5638</span> </span><span class="COMM">/**
<span class='line'>5639</span>  * Automatically determine the scale that bests fits the provided minimum step
<span class='line'>5640</span>  * @param {Number} minimumStep  The minimum step size in milliseconds
<span class='line'>5641</span>  */</span><span class="WHIT">
<span class='line'>5642</span> </span><span class="NAME">links.Timeline.StepDate.prototype.setMinimumStep</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5643</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">minimumStep</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5644</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5645</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5646</span> 
<span class='line'>5647</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">stepYear</span><span class="WHIT">       </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NUMB">1000</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">24</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">30</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">12</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5648</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">stepMonth</span><span class="WHIT">      </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NUMB">1000</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">24</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">30</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5649</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">stepDay</span><span class="WHIT">        </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NUMB">1000</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">24</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5650</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">stepHour</span><span class="WHIT">       </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NUMB">1000</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5651</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">stepMinute</span><span class="WHIT">     </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NUMB">1000</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5652</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">stepSecond</span><span class="WHIT">     </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NUMB">1000</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5653</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">stepMillisecond</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5654</span> 
<span class='line'>5655</span> </span><span class="WHIT">    </span><span class="COMM">// find the smallest step that is larger than the provided minimumStep</span><span class="WHIT">
<span class='line'>5656</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepYear</span><span class="PUNC">*</span><span class="NUMB">1000</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">        </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.YEAR</span><span class="PUNC">;</span><span class="WHIT">        </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1000</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5657</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepYear</span><span class="PUNC">*</span><span class="NUMB">500</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">         </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.YEAR</span><span class="PUNC">;</span><span class="WHIT">        </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">500</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5658</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepYear</span><span class="PUNC">*</span><span class="NUMB">100</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">         </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.YEAR</span><span class="PUNC">;</span><span class="WHIT">        </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">100</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5659</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepYear</span><span class="PUNC">*</span><span class="NUMB">50</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">          </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.YEAR</span><span class="PUNC">;</span><span class="WHIT">        </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">50</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5660</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepYear</span><span class="PUNC">*</span><span class="NUMB">10</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">          </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.YEAR</span><span class="PUNC">;</span><span class="WHIT">        </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5661</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepYear</span><span class="PUNC">*</span><span class="NUMB">5</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">           </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.YEAR</span><span class="PUNC">;</span><span class="WHIT">        </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">5</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5662</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepYear</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">             </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.YEAR</span><span class="PUNC">;</span><span class="WHIT">        </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5663</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepMonth</span><span class="PUNC">*</span><span class="NUMB">3</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">          </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MONTH</span><span class="PUNC">;</span><span class="WHIT">       </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">3</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5664</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepMonth</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">            </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MONTH</span><span class="PUNC">;</span><span class="WHIT">       </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5665</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepDay</span><span class="PUNC">*</span><span class="NUMB">5</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">            </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.DAY</span><span class="PUNC">;</span><span class="WHIT">         </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">5</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5666</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepDay</span><span class="PUNC">*</span><span class="NUMB">2</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">            </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.DAY</span><span class="PUNC">;</span><span class="WHIT">         </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5667</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepDay</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">              </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.DAY</span><span class="PUNC">;</span><span class="WHIT">         </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5668</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepDay</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">            </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.WEEKDAY</span><span class="PUNC">;</span><span class="WHIT">     </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5669</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepHour</span><span class="PUNC">*</span><span class="NUMB">4</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">           </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.HOUR</span><span class="PUNC">;</span><span class="WHIT">        </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">4</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5670</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepHour</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">             </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.HOUR</span><span class="PUNC">;</span><span class="WHIT">        </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5671</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepMinute</span><span class="PUNC">*</span><span class="NUMB">15</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">        </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MINUTE</span><span class="PUNC">;</span><span class="WHIT">      </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">15</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5672</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepMinute</span><span class="PUNC">*</span><span class="NUMB">10</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">        </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MINUTE</span><span class="PUNC">;</span><span class="WHIT">      </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5673</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepMinute</span><span class="PUNC">*</span><span class="NUMB">5</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">         </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MINUTE</span><span class="PUNC">;</span><span class="WHIT">      </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">5</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5674</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepMinute</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">           </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MINUTE</span><span class="PUNC">;</span><span class="WHIT">      </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5675</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepSecond</span><span class="PUNC">*</span><span class="NUMB">15</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">        </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.SECOND</span><span class="PUNC">;</span><span class="WHIT">      </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">15</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5676</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepSecond</span><span class="PUNC">*</span><span class="NUMB">10</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">        </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.SECOND</span><span class="PUNC">;</span><span class="WHIT">      </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5677</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepSecond</span><span class="PUNC">*</span><span class="NUMB">5</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">         </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.SECOND</span><span class="PUNC">;</span><span class="WHIT">      </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">5</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5678</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepSecond</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">           </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.SECOND</span><span class="PUNC">;</span><span class="WHIT">      </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5679</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepMillisecond</span><span class="PUNC">*</span><span class="NUMB">200</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">  </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MILLISECOND</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">200</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5680</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepMillisecond</span><span class="PUNC">*</span><span class="NUMB">100</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">  </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MILLISECOND</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">100</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5681</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepMillisecond</span><span class="PUNC">*</span><span class="NUMB">50</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">   </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MILLISECOND</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">50</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5682</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepMillisecond</span><span class="PUNC">*</span><span class="NUMB">10</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">   </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MILLISECOND</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5683</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepMillisecond</span><span class="PUNC">*</span><span class="NUMB">5</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">    </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MILLISECOND</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">5</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5684</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">stepMillisecond</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">minimumStep</span><span class="PUNC">)</span><span class="WHIT">      </span><span class="PUNC">{</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MILLISECOND</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5685</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5686</span> 
<span class='line'>5687</span> </span><span class="COMM">/**
<span class='line'>5688</span>  * Snap a date to a rounded value. The snap intervals are dependent on the
<span class='line'>5689</span>  * current scale and step.
<span class='line'>5690</span>  * @param {Date} date   the date to be snapped
<span class='line'>5691</span>  */</span><span class="WHIT">
<span class='line'>5692</span> </span><span class="NAME">links.Timeline.StepDate.prototype.snap</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">date</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5693</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.YEAR</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5694</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">year</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">date.getFullYear</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">date.getMonth</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">12</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5695</span> </span><span class="WHIT">        </span><span class="NAME">date.setFullYear</span><span class="PUNC">(</span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">year</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5696</span> </span><span class="WHIT">        </span><span class="NAME">date.setMonth</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5697</span> </span><span class="WHIT">        </span><span class="NAME">date.setDate</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5698</span> </span><span class="WHIT">        </span><span class="NAME">date.setHours</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5699</span> </span><span class="WHIT">        </span><span class="NAME">date.setMinutes</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5700</span> </span><span class="WHIT">        </span><span class="NAME">date.setSeconds</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5701</span> </span><span class="WHIT">        </span><span class="NAME">date.setMilliseconds</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5702</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5703</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MONTH</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5704</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">date.getDate</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NUMB">15</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5705</span> </span><span class="WHIT">            </span><span class="NAME">date.setDate</span><span class="PUNC">(</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5706</span> </span><span class="WHIT">            </span><span class="NAME">date.setMonth</span><span class="PUNC">(</span><span class="NAME">date.getMonth</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5707</span> </span><span class="WHIT">            </span><span class="COMM">// important: first set Date to 1, after that change the month.      </span><span class="WHIT">
<span class='line'>5708</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5709</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5710</span> </span><span class="WHIT">            </span><span class="NAME">date.setDate</span><span class="PUNC">(</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5711</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5712</span> 
<span class='line'>5713</span> </span><span class="WHIT">        </span><span class="NAME">date.setHours</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5714</span> </span><span class="WHIT">        </span><span class="NAME">date.setMinutes</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5715</span> </span><span class="WHIT">        </span><span class="NAME">date.setSeconds</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5716</span> </span><span class="WHIT">        </span><span class="NAME">date.setMilliseconds</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5717</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5718</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.DAY</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT">
<span class='line'>5719</span> </span><span class="WHIT">        </span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.WEEKDAY</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5720</span> </span><span class="WHIT">        </span><span class="KEYW">switch</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5721</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NUMB">5</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5722</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5723</span> </span><span class="WHIT">                </span><span class="NAME">date.setHours</span><span class="PUNC">(</span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">date.getHours</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">24</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">24</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5724</span> </span><span class="WHIT">            </span><span class="KEYW">default</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5725</span> </span><span class="WHIT">                </span><span class="NAME">date.setHours</span><span class="PUNC">(</span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">date.getHours</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">12</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">12</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5726</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5727</span> </span><span class="WHIT">        </span><span class="NAME">date.setMinutes</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5728</span> </span><span class="WHIT">        </span><span class="NAME">date.setSeconds</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5729</span> </span><span class="WHIT">        </span><span class="NAME">date.setMilliseconds</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5730</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5731</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.HOUR</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5732</span> </span><span class="WHIT">        </span><span class="KEYW">switch</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5733</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NUMB">4</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5734</span> </span><span class="WHIT">                </span><span class="NAME">date.setMinutes</span><span class="PUNC">(</span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">date.getMinutes</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5735</span> </span><span class="WHIT">            </span><span class="KEYW">default</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5736</span> </span><span class="WHIT">                </span><span class="NAME">date.setMinutes</span><span class="PUNC">(</span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">date.getMinutes</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">30</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">30</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5737</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5738</span> </span><span class="WHIT">        </span><span class="NAME">date.setSeconds</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5739</span> </span><span class="WHIT">        </span><span class="NAME">date.setMilliseconds</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5740</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MINUTE</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5741</span> </span><span class="WHIT">        </span><span class="KEYW">switch</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5742</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NUMB">15</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5743</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5744</span> </span><span class="WHIT">                </span><span class="NAME">date.setMinutes</span><span class="PUNC">(</span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">date.getMinutes</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">5</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">5</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5745</span> </span><span class="WHIT">                </span><span class="NAME">date.setSeconds</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5746</span> </span><span class="WHIT">                </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5747</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NUMB">5</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5748</span> </span><span class="WHIT">                </span><span class="NAME">date.setSeconds</span><span class="PUNC">(</span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">date.getSeconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">60</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5749</span> </span><span class="WHIT">            </span><span class="KEYW">default</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5750</span> </span><span class="WHIT">                </span><span class="NAME">date.setSeconds</span><span class="PUNC">(</span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">date.getSeconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">30</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">30</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5751</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5752</span> </span><span class="WHIT">        </span><span class="NAME">date.setMilliseconds</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5753</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5754</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.SECOND</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5755</span> </span><span class="WHIT">        </span><span class="KEYW">switch</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.step</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5756</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NUMB">15</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5757</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NUMB">10</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5758</span> </span><span class="WHIT">                </span><span class="NAME">date.setSeconds</span><span class="PUNC">(</span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">date.getSeconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">5</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">5</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5759</span> </span><span class="WHIT">                </span><span class="NAME">date.setMilliseconds</span><span class="PUNC">(</span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5760</span> </span><span class="WHIT">                </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5761</span> </span><span class="WHIT">            </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NUMB">5</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5762</span> </span><span class="WHIT">                </span><span class="NAME">date.setMilliseconds</span><span class="PUNC">(</span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">date.getMilliseconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">1000</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">1000</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5763</span> </span><span class="WHIT">            </span><span class="KEYW">default</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5764</span> </span><span class="WHIT">                </span><span class="NAME">date.setMilliseconds</span><span class="PUNC">(</span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">date.getMilliseconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">500</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NUMB">500</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="KEYW">break</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5765</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5766</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5767</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.scale</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MILLISECOND</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5768</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">step</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NUMB">5</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">this.step</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5769</span> </span><span class="WHIT">        </span><span class="NAME">date.setMilliseconds</span><span class="PUNC">(</span><span class="NAME">Math.round</span><span class="PUNC">(</span><span class="NAME">date.getMilliseconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">step</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">step</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5770</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5771</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5772</span> 
<span class='line'>5773</span> </span><span class="COMM">/**
<span class='line'>5774</span>  * Check if the current step is a major step (for example when the step
<span class='line'>5775</span>  * is DAY, a major step is each first day of the MONTH)
<span class='line'>5776</span>  * @return {boolean} true if current date is major, else false.
<span class='line'>5777</span>  */</span><span class="WHIT">
<span class='line'>5778</span> </span><span class="NAME">links.Timeline.StepDate.prototype.isMajor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5779</span> </span><span class="WHIT">    </span><span class="KEYW">switch</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.scale</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5780</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MILLISECOND</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5781</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.current.getMilliseconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5782</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.SECOND</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5783</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.current.getSeconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5784</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MINUTE</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5785</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.current.getHours</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.current.getMinutes</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5786</span> </span><span class="WHIT">        </span><span class="COMM">// Note: this is no bug. Major label is equal for both minute and hour scale</span><span class="WHIT">
<span class='line'>5787</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.HOUR</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5788</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.current.getHours</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5789</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.WEEKDAY</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="COMM">// intentional fall through</span><span class="WHIT">
<span class='line'>5790</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.DAY</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5791</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.current.getDate</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5792</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MONTH</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5793</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.current.getMonth</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5794</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.YEAR</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5795</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5796</span> </span><span class="WHIT">        </span><span class="KEYW">default</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5797</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5798</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5799</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5800</span> 
<span class='line'>5801</span> 
<span class='line'>5802</span> </span><span class="COMM">/**
<span class='line'>5803</span>  * Returns formatted text for the minor axislabel, depending on the current
<span class='line'>5804</span>  * date and the scale. For example when scale is MINUTE, the current time is
<span class='line'>5805</span>  * formatted as "hh:mm".
<span class='line'>5806</span>  * @param {Date} [date] custom date. if not provided, current date is taken
<span class='line'>5807</span>  */</span><span class="WHIT">
<span class='line'>5808</span> </span><span class="NAME">links.Timeline.StepDate.prototype.getLabelMinor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">date</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5809</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">MONTHS_SHORT</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="STRN">"Jan"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"Feb"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"Mar"</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5810</span> </span><span class="WHIT">        </span><span class="STRN">"Apr"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"May"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"Jun"</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5811</span> </span><span class="WHIT">        </span><span class="STRN">"Jul"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"Aug"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"Sep"</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5812</span> </span><span class="WHIT">        </span><span class="STRN">"Oct"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"Nov"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"Dec"</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5813</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">DAYS_SHORT</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="STRN">"Sun"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"Mon"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"Tue"</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5814</span> </span><span class="WHIT">        </span><span class="STRN">"Wed"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"Thu"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"Fri"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"Sat"</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5815</span> 
<span class='line'>5816</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">date</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5817</span> </span><span class="WHIT">        </span><span class="NAME">date</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.current</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5818</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5819</span> 
<span class='line'>5820</span> </span><span class="WHIT">    </span><span class="KEYW">switch</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.scale</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5821</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MILLISECOND</span><span class="PUNC">:</span><span class="WHIT">  </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">String</span><span class="PUNC">(</span><span class="NAME">date.getMilliseconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5822</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.SECOND</span><span class="PUNC">:</span><span class="WHIT">       </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">String</span><span class="PUNC">(</span><span class="NAME">date.getSeconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5823</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MINUTE</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5824</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">this.addZeros</span><span class="PUNC">(</span><span class="NAME">date.getHours</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">":"</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.addZeros</span><span class="PUNC">(</span><span class="NAME">date.getMinutes</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5825</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.HOUR</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5826</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">this.addZeros</span><span class="PUNC">(</span><span class="NAME">date.getHours</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">":"</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">this.addZeros</span><span class="PUNC">(</span><span class="NAME">date.getMinutes</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5827</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.WEEKDAY</span><span class="PUNC">:</span><span class="WHIT">      </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">DAYS_SHORT</span><span class="PUNC">[</span><span class="NAME">date.getDay</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">' '</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">date.getDate</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5828</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.DAY</span><span class="PUNC">:</span><span class="WHIT">          </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">String</span><span class="PUNC">(</span><span class="NAME">date.getDate</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5829</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MONTH</span><span class="PUNC">:</span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">MONTHS_SHORT</span><span class="PUNC">[</span><span class="NAME">date.getMonth</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">   </span><span class="COMM">// month is zero based</span><span class="WHIT">
<span class='line'>5830</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.YEAR</span><span class="PUNC">:</span><span class="WHIT">         </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">String</span><span class="PUNC">(</span><span class="NAME">date.getFullYear</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5831</span> </span><span class="WHIT">        </span><span class="KEYW">default</span><span class="PUNC">:</span><span class="WHIT">                                         </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="STRN">""</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5832</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5833</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5834</span> 
<span class='line'>5835</span> 
<span class='line'>5836</span> </span><span class="COMM">/**
<span class='line'>5837</span>  * Returns formatted text for the major axislabel, depending on the current
<span class='line'>5838</span>  * date and the scale. For example when scale is MINUTE, the major scale is
<span class='line'>5839</span>  * hours, and the hour will be formatted as "hh".
<span class='line'>5840</span>  * @param {Date} [date] custom date. if not provided, current date is taken
<span class='line'>5841</span>  */</span><span class="WHIT">
<span class='line'>5842</span> </span><span class="NAME">links.Timeline.StepDate.prototype.getLabelMajor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">date</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5843</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">MONTHS</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="STRN">"January"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"February"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"March"</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5844</span> </span><span class="WHIT">        </span><span class="STRN">"April"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"May"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"June"</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5845</span> </span><span class="WHIT">        </span><span class="STRN">"July"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"August"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"September"</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5846</span> </span><span class="WHIT">        </span><span class="STRN">"October"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"November"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"December"</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5847</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">DAYS</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="STRN">"Sunday"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"Monday"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"Tuesday"</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>5848</span> </span><span class="WHIT">        </span><span class="STRN">"Wednesday"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"Thursday"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"Friday"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"Saturday"</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5849</span> 
<span class='line'>5850</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">date</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5851</span> </span><span class="WHIT">        </span><span class="NAME">date</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.current</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5852</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5853</span> 
<span class='line'>5854</span> </span><span class="WHIT">    </span><span class="KEYW">switch</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">this.scale</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5855</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MILLISECOND</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5856</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT">  </span><span class="NAME">this.addZeros</span><span class="PUNC">(</span><span class="NAME">date.getHours</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">":"</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
<span class='line'>5857</span> </span><span class="WHIT">                </span><span class="NAME">this.addZeros</span><span class="PUNC">(</span><span class="NAME">date.getMinutes</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">":"</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
<span class='line'>5858</span> </span><span class="WHIT">                </span><span class="NAME">this.addZeros</span><span class="PUNC">(</span><span class="NAME">date.getSeconds</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5859</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.SECOND</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5860</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT">  </span><span class="NAME">date.getDate</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">" "</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
<span class='line'>5861</span> </span><span class="WHIT">                </span><span class="NAME">MONTHS</span><span class="PUNC">[</span><span class="NAME">date.getMonth</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">" "</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
<span class='line'>5862</span> </span><span class="WHIT">                </span><span class="NAME">this.addZeros</span><span class="PUNC">(</span><span class="NAME">date.getHours</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">":"</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
<span class='line'>5863</span> </span><span class="WHIT">                </span><span class="NAME">this.addZeros</span><span class="PUNC">(</span><span class="NAME">date.getMinutes</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">2</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5864</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MINUTE</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5865</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT">  </span><span class="NAME">DAYS</span><span class="PUNC">[</span><span class="NAME">date.getDay</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">" "</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
<span class='line'>5866</span> </span><span class="WHIT">                </span><span class="NAME">date.getDate</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">" "</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
<span class='line'>5867</span> </span><span class="WHIT">                </span><span class="NAME">MONTHS</span><span class="PUNC">[</span><span class="NAME">date.getMonth</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">" "</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
<span class='line'>5868</span> </span><span class="WHIT">                </span><span class="NAME">date.getFullYear</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5869</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.HOUR</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5870</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT">  </span><span class="NAME">DAYS</span><span class="PUNC">[</span><span class="NAME">date.getDay</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">" "</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
<span class='line'>5871</span> </span><span class="WHIT">                </span><span class="NAME">date.getDate</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">" "</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
<span class='line'>5872</span> </span><span class="WHIT">                </span><span class="NAME">MONTHS</span><span class="PUNC">[</span><span class="NAME">date.getMonth</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">" "</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
<span class='line'>5873</span> </span><span class="WHIT">                </span><span class="NAME">date.getFullYear</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5874</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.WEEKDAY</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5875</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.DAY</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5876</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT">  </span><span class="NAME">MONTHS</span><span class="PUNC">[</span><span class="NAME">date.getMonth</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="STRN">" "</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
<span class='line'>5877</span> </span><span class="WHIT">                </span><span class="NAME">date.getFullYear</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5878</span> </span><span class="WHIT">        </span><span class="KEYW">case</span><span class="WHIT"> </span><span class="NAME">links.Timeline.StepDate.SCALE.MONTH</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5879</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">String</span><span class="PUNC">(</span><span class="NAME">date.getFullYear</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5880</span> </span><span class="WHIT">        </span><span class="KEYW">default</span><span class="PUNC">:</span><span class="WHIT">
<span class='line'>5881</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="STRN">""</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5882</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5883</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5884</span> 
<span class='line'>5885</span> </span><span class="COMM">/**
<span class='line'>5886</span>  * Add leading zeros to the given value to match the desired length.
<span class='line'>5887</span>  * For example addZeros(123, 5) returns "00123"
<span class='line'>5888</span>  * @param {int} value   A value
<span class='line'>5889</span>  * @param {int} len     Desired final length
<span class='line'>5890</span>  * @return {string}     value with leading zeros
<span class='line'>5891</span>  */</span><span class="WHIT">
<span class='line'>5892</span> </span><span class="NAME">links.Timeline.StepDate.prototype.addZeros</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">value</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">len</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5893</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">str</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">""</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">value</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5894</span> </span><span class="WHIT">    </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">str.length</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">len</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5895</span> </span><span class="WHIT">        </span><span class="NAME">str</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"0"</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">str</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5896</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5897</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">str</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5898</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5899</span> 
<span class='line'>5900</span> 
<span class='line'>5901</span> 
<span class='line'>5902</span> </span><span class="COMM">/** ------------------------------------------------------------------------ **/</span><span class="WHIT">
<span class='line'>5903</span> 
<span class='line'>5904</span> </span><span class="COMM">/**
<span class='line'>5905</span>  * Image Loader service.
<span class='line'>5906</span>  * can be used to get a callback when a certain image is loaded
<span class='line'>5907</span>  *
<span class='line'>5908</span>  */</span><span class="WHIT">
<span class='line'>5909</span> </span><span class="NAME">links.imageloader</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5910</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">urls</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="COMM">// the loaded urls</span><span class="WHIT">
<span class='line'>5911</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">callbacks</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// the urls currently being loaded. Each key contains </span><span class="WHIT">
<span class='line'>5912</span> </span><span class="WHIT">    </span><span class="COMM">// an array with callbacks</span><span class="WHIT">
<span class='line'>5913</span> 
<span class='line'>5914</span> </span><span class="WHIT">    </span><span class="COMM">/**
<span class='line'>5915</span>      * Check if an image url is loaded
<span class='line'>5916</span>      * @param {String} url
<span class='line'>5917</span>      * @return {boolean} loaded   True when loaded, false when not loaded
<span class='line'>5918</span>      *                            or when being loaded
<span class='line'>5919</span>      */</span><span class="WHIT">
<span class='line'>5920</span> </span><span class="WHIT">    </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">isLoaded</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">url</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5921</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">urls</span><span class="PUNC">[</span><span class="NAME">url</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5922</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5923</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5924</span> 
<span class='line'>5925</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">image</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Image</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5926</span> </span><span class="WHIT">        </span><span class="NAME">image.src</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">url</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5927</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">image.complete</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5928</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5929</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5930</span> 
<span class='line'>5931</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5932</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5933</span> 
<span class='line'>5934</span> </span><span class="WHIT">    </span><span class="COMM">/**
<span class='line'>5935</span>      * Check if an image url is being loaded
<span class='line'>5936</span>      * @param {String} url
<span class='line'>5937</span>      * @return {boolean} loading   True when being loaded, false when not loading
<span class='line'>5938</span>      *                             or when already loaded
<span class='line'>5939</span>      */</span><span class="WHIT">
<span class='line'>5940</span> </span><span class="WHIT">    </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">isLoading</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">url</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5941</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">callbacks</span><span class="PUNC">[</span><span class="NAME">url</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5942</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5943</span> 
<span class='line'>5944</span> </span><span class="WHIT">    </span><span class="COMM">/**
<span class='line'>5945</span>      * Load given image url
<span class='line'>5946</span>      * @param {String} url
<span class='line'>5947</span>      * @param {function} callback
<span class='line'>5948</span>      * @param {boolean} sendCallbackWhenAlreadyLoaded  optional
<span class='line'>5949</span>      */</span><span class="WHIT">
<span class='line'>5950</span> </span><span class="WHIT">    </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">load</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">url</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">callback</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">sendCallbackWhenAlreadyLoaded</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5951</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">sendCallbackWhenAlreadyLoaded</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5952</span> </span><span class="WHIT">            </span><span class="NAME">sendCallbackWhenAlreadyLoaded</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5953</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5954</span> 
<span class='line'>5955</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">isLoaded</span><span class="PUNC">(</span><span class="NAME">url</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5956</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">sendCallbackWhenAlreadyLoaded</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5957</span> </span><span class="WHIT">                </span><span class="NAME">callback</span><span class="PUNC">(</span><span class="NAME">url</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5958</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5959</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5960</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5961</span> 
<span class='line'>5962</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">isLoading</span><span class="PUNC">(</span><span class="NAME">url</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">!</span><span class="NAME">sendCallbackWhenAlreadyLoaded</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5963</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5964</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5965</span> 
<span class='line'>5966</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">c</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">callbacks</span><span class="PUNC">[</span><span class="NAME">url</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5967</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">c</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5968</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">image</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Image</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5969</span> </span><span class="WHIT">            </span><span class="NAME">image.src</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">url</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5970</span> 
<span class='line'>5971</span> </span><span class="WHIT">            </span><span class="NAME">c</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5972</span> </span><span class="WHIT">            </span><span class="NAME">callbacks</span><span class="PUNC">[</span><span class="NAME">url</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">c</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5973</span> 
<span class='line'>5974</span> </span><span class="WHIT">            </span><span class="NAME">image.onload</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5975</span> </span><span class="WHIT">                </span><span class="NAME">urls</span><span class="PUNC">[</span><span class="NAME">url</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5976</span> </span><span class="WHIT">                </span><span class="KEYW">delete</span><span class="WHIT"> </span><span class="NAME">callbacks</span><span class="PUNC">[</span><span class="NAME">url</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5977</span> 
<span class='line'>5978</span> </span><span class="WHIT">                </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="NAME">c.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5979</span> </span><span class="WHIT">                    </span><span class="NAME">c</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">(</span><span class="NAME">url</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5980</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5981</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5982</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5983</span> 
<span class='line'>5984</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">c.indexOf</span><span class="PUNC">(</span><span class="NAME">callback</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5985</span> </span><span class="WHIT">            </span><span class="NAME">c.push</span><span class="PUNC">(</span><span class="NAME">callback</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5986</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5987</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>5988</span> 
<span class='line'>5989</span> </span><span class="WHIT">    </span><span class="COMM">/**
<span class='line'>5990</span>      * Load a set of images, and send a callback as soon as all images are
<span class='line'>5991</span>      * loaded
<span class='line'>5992</span>      * @param {String[]} urls
<span class='line'>5993</span>      * @param {function } callback
<span class='line'>5994</span>      * @param {boolean} sendCallbackWhenAlreadyLoaded
<span class='line'>5995</span>      */</span><span class="WHIT">
<span class='line'>5996</span> </span><span class="WHIT">    </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">loadAll</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">urls</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">callback</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">sendCallbackWhenAlreadyLoaded</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>5997</span> </span><span class="WHIT">        </span><span class="COMM">// list all urls which are not yet loaded</span><span class="WHIT">
<span class='line'>5998</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">urlsLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>5999</span> </span><span class="WHIT">        </span><span class="NAME">urls.forEach</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">url</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6000</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">isLoaded</span><span class="PUNC">(</span><span class="NAME">url</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6001</span> </span><span class="WHIT">                </span><span class="NAME">urlsLeft.push</span><span class="PUNC">(</span><span class="NAME">url</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6002</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6003</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6004</span> 
<span class='line'>6005</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">urlsLeft.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6006</span> </span><span class="WHIT">            </span><span class="COMM">// there are unloaded images</span><span class="WHIT">
<span class='line'>6007</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">countLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">urlsLeft.length</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6008</span> </span><span class="WHIT">            </span><span class="NAME">urlsLeft.forEach</span><span class="PUNC">(</span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">url</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6009</span> </span><span class="WHIT">                </span><span class="NAME">load</span><span class="PUNC">(</span><span class="NAME">url</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6010</span> </span><span class="WHIT">                    </span><span class="NAME">countLeft</span><span class="PUNC">--</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6011</span> </span><span class="WHIT">                    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">countLeft</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6012</span> </span><span class="WHIT">                        </span><span class="COMM">// done!</span><span class="WHIT">
<span class='line'>6013</span> </span><span class="WHIT">                        </span><span class="NAME">callback</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6014</span> </span><span class="WHIT">                    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6015</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">sendCallbackWhenAlreadyLoaded</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6016</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6017</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6018</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6019</span> </span><span class="WHIT">            </span><span class="COMM">// we are already done!</span><span class="WHIT">
<span class='line'>6020</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">sendCallbackWhenAlreadyLoaded</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6021</span> </span><span class="WHIT">                </span><span class="NAME">callback</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6022</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6023</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6024</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6025</span> 
<span class='line'>6026</span> </span><span class="WHIT">    </span><span class="COMM">/**
<span class='line'>6027</span>      * Recursively retrieve all image urls from the images located inside a given
<span class='line'>6028</span>      * HTML element
<span class='line'>6029</span>      * @param {Node} elem
<span class='line'>6030</span>      * @param {String[]} urls   Urls will be added here (no duplicates)
<span class='line'>6031</span>      */</span><span class="WHIT">
<span class='line'>6032</span> </span><span class="WHIT">    </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">filterImageUrls</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">elem</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">urls</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6033</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">child</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">elem.firstChild</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6034</span> </span><span class="WHIT">        </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">child</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6035</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">child.tagName</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">'IMG'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6036</span> </span><span class="WHIT">                </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">url</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">child.src</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6037</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">urls.indexOf</span><span class="PUNC">(</span><span class="NAME">url</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6038</span> </span><span class="WHIT">                    </span><span class="NAME">urls.push</span><span class="PUNC">(</span><span class="NAME">url</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6039</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6040</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6041</span> 
<span class='line'>6042</span> </span><span class="WHIT">            </span><span class="NAME">filterImageUrls</span><span class="PUNC">(</span><span class="NAME">child</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">urls</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6043</span> 
<span class='line'>6044</span> </span><span class="WHIT">            </span><span class="NAME">child</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">child.nextSibling</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6045</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6046</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6047</span> 
<span class='line'>6048</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6049</span> </span><span class="WHIT">        </span><span class="STRN">'isLoaded'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">isLoaded</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>6050</span> </span><span class="WHIT">        </span><span class="STRN">'isLoading'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">isLoading</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>6051</span> </span><span class="WHIT">        </span><span class="STRN">'load'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">load</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>6052</span> </span><span class="WHIT">        </span><span class="STRN">'loadAll'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">loadAll</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>6053</span> </span><span class="WHIT">        </span><span class="STRN">'filterImageUrls'</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NAME">filterImageUrls</span><span class="WHIT">
<span class='line'>6054</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6055</span> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6056</span> 
<span class='line'>6057</span> 
<span class='line'>6058</span> </span><span class="COMM">/** ------------------------------------------------------------------------ **/</span><span class="WHIT">
<span class='line'>6059</span> 
<span class='line'>6060</span> 
<span class='line'>6061</span> </span><span class="COMM">/**
<span class='line'>6062</span>  * Add and event listener. Works for all browsers
<span class='line'>6063</span>  * @param {Element} element    An html element
<span class='line'>6064</span>  * @param {string}      action     The action, for example "click",
<span class='line'>6065</span>  *                                 without the prefix "on"
<span class='line'>6066</span>  * @param {function}    listener   The callback function to be executed
<span class='line'>6067</span>  * @param {boolean}     useCapture
<span class='line'>6068</span>  */</span><span class="WHIT">
<span class='line'>6069</span> </span><span class="NAME">links.Timeline.addEventListener</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">element</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">action</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">listener</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">useCapture</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6070</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">element.addEventListener</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6071</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">useCapture</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>6072</span> </span><span class="WHIT">            </span><span class="NAME">useCapture</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6073</span> 
<span class='line'>6074</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">action</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">"mousewheel"</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">navigator.userAgent.indexOf</span><span class="PUNC">(</span><span class="STRN">"Firefox"</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">>=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6075</span> </span><span class="WHIT">            </span><span class="NAME">action</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"DOMMouseScroll"</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="COMM">// For Firefox</span><span class="WHIT">
<span class='line'>6076</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6077</span> 
<span class='line'>6078</span> </span><span class="WHIT">        </span><span class="NAME">element.addEventListener</span><span class="PUNC">(</span><span class="NAME">action</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">listener</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">useCapture</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6079</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6080</span> </span><span class="WHIT">        </span><span class="NAME">element.attachEvent</span><span class="PUNC">(</span><span class="STRN">"on"</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">action</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">listener</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="COMM">// IE browsers</span><span class="WHIT">
<span class='line'>6081</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6082</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6083</span> 
<span class='line'>6084</span> </span><span class="COMM">/**
<span class='line'>6085</span>  * Remove an event listener from an element
<span class='line'>6086</span>  * @param {Element}  element   An html dom element
<span class='line'>6087</span>  * @param {string}       action    The name of the event, for example "mousedown"
<span class='line'>6088</span>  * @param {function}     listener  The listener function
<span class='line'>6089</span>  * @param {boolean}      useCapture
<span class='line'>6090</span>  */</span><span class="WHIT">
<span class='line'>6091</span> </span><span class="NAME">links.Timeline.removeEventListener</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">element</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">action</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">listener</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">useCapture</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6092</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">element.removeEventListener</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6093</span> </span><span class="WHIT">        </span><span class="COMM">// non-IE browsers</span><span class="WHIT">
<span class='line'>6094</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">useCapture</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>6095</span> </span><span class="WHIT">            </span><span class="NAME">useCapture</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6096</span> 
<span class='line'>6097</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">action</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">"mousewheel"</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">navigator.userAgent.indexOf</span><span class="PUNC">(</span><span class="STRN">"Firefox"</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">>=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6098</span> </span><span class="WHIT">            </span><span class="NAME">action</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"DOMMouseScroll"</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="COMM">// For Firefox</span><span class="WHIT">
<span class='line'>6099</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6100</span> 
<span class='line'>6101</span> </span><span class="WHIT">        </span><span class="NAME">element.removeEventListener</span><span class="PUNC">(</span><span class="NAME">action</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">listener</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">useCapture</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6102</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6103</span> </span><span class="WHIT">        </span><span class="COMM">// IE browsers</span><span class="WHIT">
<span class='line'>6104</span> </span><span class="WHIT">        </span><span class="NAME">element.detachEvent</span><span class="PUNC">(</span><span class="STRN">"on"</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">action</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">listener</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6105</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6106</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6107</span> 
<span class='line'>6108</span> 
<span class='line'>6109</span> </span><span class="COMM">/**
<span class='line'>6110</span>  * Get HTML element which is the target of the event
<span class='line'>6111</span>  * @param {Event} event
<span class='line'>6112</span>  * @return {Element} target element
<span class='line'>6113</span>  */</span><span class="WHIT">
<span class='line'>6114</span> </span><span class="NAME">links.Timeline.getTarget</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6115</span> </span><span class="WHIT">    </span><span class="COMM">// code from http://www.quirksmode.org/js/events_properties.html</span><span class="WHIT">
<span class='line'>6116</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6117</span> </span><span class="WHIT">        </span><span class="NAME">event</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">window.event</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6118</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6119</span> 
<span class='line'>6120</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">target</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6121</span> 
<span class='line'>6122</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event.target</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6123</span> </span><span class="WHIT">        </span><span class="NAME">target</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">event.target</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6124</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6125</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event.srcElement</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6126</span> </span><span class="WHIT">        </span><span class="NAME">target</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">event.srcElement</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6127</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6128</span> 
<span class='line'>6129</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">target.nodeType</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">target.nodeType</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">3</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6130</span> </span><span class="WHIT">        </span><span class="COMM">// defeat Safari bug</span><span class="WHIT">
<span class='line'>6131</span> </span><span class="WHIT">        </span><span class="NAME">target</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">target.parentNode</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6132</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6133</span> 
<span class='line'>6134</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">target</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6135</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6136</span> 
<span class='line'>6137</span> </span><span class="COMM">/**
<span class='line'>6138</span>  * Stop event propagation
<span class='line'>6139</span>  */</span><span class="WHIT">
<span class='line'>6140</span> </span><span class="NAME">links.Timeline.stopPropagation</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6141</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>6142</span> </span><span class="WHIT">        </span><span class="NAME">event</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">window.event</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6143</span> 
<span class='line'>6144</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event.stopPropagation</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6145</span> </span><span class="WHIT">        </span><span class="NAME">event.stopPropagation</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="COMM">// non-IE browsers</span><span class="WHIT">
<span class='line'>6146</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6147</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6148</span> </span><span class="WHIT">        </span><span class="NAME">event.cancelBubble</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="COMM">// IE browsers</span><span class="WHIT">
<span class='line'>6149</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6150</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6151</span> 
<span class='line'>6152</span> 
<span class='line'>6153</span> </span><span class="COMM">/**
<span class='line'>6154</span>  * Cancels the event if it is cancelable, without stopping further propagation of the event.
<span class='line'>6155</span>  */</span><span class="WHIT">
<span class='line'>6156</span> </span><span class="NAME">links.Timeline.preventDefault</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6157</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>6158</span> </span><span class="WHIT">        </span><span class="NAME">event</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">window.event</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6159</span> 
<span class='line'>6160</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event.preventDefault</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6161</span> </span><span class="WHIT">        </span><span class="NAME">event.preventDefault</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="COMM">// non-IE browsers</span><span class="WHIT">
<span class='line'>6162</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6163</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6164</span> </span><span class="WHIT">        </span><span class="NAME">event.returnValue</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">  </span><span class="COMM">// IE browsers</span><span class="WHIT">
<span class='line'>6165</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6166</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6167</span> 
<span class='line'>6168</span> 
<span class='line'>6169</span> </span><span class="COMM">/**
<span class='line'>6170</span>  * Retrieve the absolute left value of a DOM element
<span class='line'>6171</span>  * @param {Element} elem        A dom element, for example a div
<span class='line'>6172</span>  * @return {number} left        The absolute left position of this element
<span class='line'>6173</span>  *                              in the browser page.
<span class='line'>6174</span>  */</span><span class="WHIT">
<span class='line'>6175</span> </span><span class="NAME">links.Timeline.getAbsoluteLeft</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">elem</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6176</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">doc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.documentElement</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6177</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">body</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.body</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6178</span> 
<span class='line'>6179</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">elem.offsetLeft</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6180</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">e</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">elem.offsetParent</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6181</span> </span><span class="WHIT">    </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">e</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">e</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">body</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">e</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">doc</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6182</span> </span><span class="WHIT">        </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e.offsetLeft</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6183</span> </span><span class="WHIT">        </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e.scrollLeft</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6184</span> </span><span class="WHIT">        </span><span class="NAME">e</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e.offsetParent</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6185</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6186</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">left</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6187</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6188</span> 
<span class='line'>6189</span> </span><span class="COMM">/**
<span class='line'>6190</span>  * Retrieve the absolute top value of a DOM element
<span class='line'>6191</span>  * @param {Element} elem        A dom element, for example a div
<span class='line'>6192</span>  * @return {number} top        The absolute top position of this element
<span class='line'>6193</span>  *                              in the browser page.
<span class='line'>6194</span>  */</span><span class="WHIT">
<span class='line'>6195</span> </span><span class="NAME">links.Timeline.getAbsoluteTop</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">elem</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6196</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">doc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.documentElement</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6197</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">body</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.body</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6198</span> 
<span class='line'>6199</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">elem.offsetTop</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6200</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">e</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">elem.offsetParent</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6201</span> </span><span class="WHIT">    </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">e</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">e</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">body</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">e</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">doc</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6202</span> </span><span class="WHIT">        </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e.offsetTop</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6203</span> </span><span class="WHIT">        </span><span class="NAME">top</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e.scrollTop</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6204</span> </span><span class="WHIT">        </span><span class="NAME">e</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e.offsetParent</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6205</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6206</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">top</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6207</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6208</span> 
<span class='line'>6209</span> </span><span class="COMM">/**
<span class='line'>6210</span>  * Get the absolute, vertical mouse position from an event.
<span class='line'>6211</span>  * @param {Event} event
<span class='line'>6212</span>  * @return {Number} pageY
<span class='line'>6213</span>  */</span><span class="WHIT">
<span class='line'>6214</span> </span><span class="NAME">links.Timeline.getPageY</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6215</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="STRN">'pageY'</span><span class="WHIT"> </span><span class="KEYW">in</span><span class="WHIT"> </span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6216</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">event.pageY</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6217</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6218</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6219</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">clientY</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6220</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">(</span><span class="STRN">'targetTouches'</span><span class="WHIT"> </span><span class="KEYW">in</span><span class="WHIT"> </span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">event.targetTouches.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6221</span> </span><span class="WHIT">            </span><span class="NAME">clientY</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">event.targetTouches</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">clientY</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6222</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6223</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6224</span> </span><span class="WHIT">            </span><span class="NAME">clientY</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">event.clientY</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6225</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6226</span> 
<span class='line'>6227</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">doc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.documentElement</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6228</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">body</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.body</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6229</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">clientY</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
<span class='line'>6230</span> </span><span class="WHIT">            </span><span class="PUNC">(</span><span class="WHIT"> </span><span class="NAME">doc</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">doc.scrollTop</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">body</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">body.scrollTop</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="WHIT"> </span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT">
<span class='line'>6231</span> </span><span class="WHIT">            </span><span class="PUNC">(</span><span class="WHIT"> </span><span class="NAME">doc</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">doc.clientTop</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">body</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">body.clientTop</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="WHIT"> </span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6232</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6233</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6234</span> 
<span class='line'>6235</span> </span><span class="COMM">/**
<span class='line'>6236</span>  * Get the absolute, horizontal mouse position from an event.
<span class='line'>6237</span>  * @param {Event} event
<span class='line'>6238</span>  * @return {Number} pageX
<span class='line'>6239</span>  */</span><span class="WHIT">
<span class='line'>6240</span> </span><span class="NAME">links.Timeline.getPageX</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6241</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="STRN">'pageY'</span><span class="WHIT"> </span><span class="KEYW">in</span><span class="WHIT"> </span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6242</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">event.pageX</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6243</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6244</span> </span><span class="WHIT">    </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6245</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">clientX</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6246</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">(</span><span class="STRN">'targetTouches'</span><span class="WHIT"> </span><span class="KEYW">in</span><span class="WHIT"> </span><span class="NAME">event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">event.targetTouches.length</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6247</span> </span><span class="WHIT">            </span><span class="NAME">clientX</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">event.targetTouches</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">clientX</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6248</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6249</span> </span><span class="WHIT">        </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6250</span> </span><span class="WHIT">            </span><span class="NAME">clientX</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">event.clientX</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6251</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6252</span> 
<span class='line'>6253</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">doc</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.documentElement</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6254</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">body</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.body</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6255</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">clientX</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT">
<span class='line'>6256</span> </span><span class="WHIT">            </span><span class="PUNC">(</span><span class="WHIT"> </span><span class="NAME">doc</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">doc.scrollLeft</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">body</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">body.scrollLeft</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="WHIT"> </span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT">
<span class='line'>6257</span> </span><span class="WHIT">            </span><span class="PUNC">(</span><span class="WHIT"> </span><span class="NAME">doc</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">doc.clientLeft</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">body</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">body.clientLeft</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="WHIT"> </span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6258</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6259</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6260</span> 
<span class='line'>6261</span> </span><span class="COMM">/**
<span class='line'>6262</span>  * add a className to the given elements style
<span class='line'>6263</span>  * @param {Element} elem
<span class='line'>6264</span>  * @param {String} className
<span class='line'>6265</span>  */</span><span class="WHIT">
<span class='line'>6266</span> </span><span class="NAME">links.Timeline.addClassName</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">elem</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">className</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6267</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">classes</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">elem.className.split</span><span class="PUNC">(</span><span class="STRN">' '</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6268</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">classes.indexOf</span><span class="PUNC">(</span><span class="NAME">className</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6269</span> </span><span class="WHIT">        </span><span class="NAME">classes.push</span><span class="PUNC">(</span><span class="NAME">className</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// add the class to the array</span><span class="WHIT">
<span class='line'>6270</span> </span><span class="WHIT">        </span><span class="NAME">elem.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">classes.join</span><span class="PUNC">(</span><span class="STRN">' '</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6271</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6272</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6273</span> 
<span class='line'>6274</span> </span><span class="COMM">/**
<span class='line'>6275</span>  * add a className to the given elements style
<span class='line'>6276</span>  * @param {Element} elem
<span class='line'>6277</span>  * @param {String} className
<span class='line'>6278</span>  */</span><span class="WHIT">
<span class='line'>6279</span> </span><span class="NAME">links.Timeline.removeClassName</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">elem</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">className</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6280</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">classes</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">elem.className.split</span><span class="PUNC">(</span><span class="STRN">' '</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6281</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">classes.indexOf</span><span class="PUNC">(</span><span class="NAME">className</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6282</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">index</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="NUMB">1</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6283</span> </span><span class="WHIT">        </span><span class="NAME">classes.splice</span><span class="PUNC">(</span><span class="NAME">index</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NUMB">1</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// remove the class from the array</span><span class="WHIT">
<span class='line'>6284</span> </span><span class="WHIT">        </span><span class="NAME">elem.className</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">classes.join</span><span class="PUNC">(</span><span class="STRN">' '</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6285</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6286</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6287</span> 
<span class='line'>6288</span> </span><span class="COMM">/**
<span class='line'>6289</span>  * Check if given object is a Javascript Array
<span class='line'>6290</span>  * @param {*} obj
<span class='line'>6291</span>  * @return {Boolean} isArray    true if the given object is an array
<span class='line'>6292</span>  */</span><span class="WHIT">
<span class='line'>6293</span> </span><span class="COMM">// See http://stackoverflow.com/questions/2943805/javascript-instanceof-typeof-in-gwt-jsni</span><span class="WHIT">
<span class='line'>6294</span> </span><span class="NAME">links.Timeline.isArray</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">obj</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6295</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">obj</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">Array</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6296</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6297</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6298</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">Object.prototype.toString.call</span><span class="PUNC">(</span><span class="NAME">obj</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">'[object Array]'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6299</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6300</span> 
<span class='line'>6301</span> </span><span class="COMM">/**
<span class='line'>6302</span>  * parse a JSON date
<span class='line'>6303</span>  * @param {Date | String | Number} date    Date object to be parsed. Can be:
<span class='line'>6304</span>  *                                         - a Date object like new Date(),
<span class='line'>6305</span>  *                                         - a long like 1356970529389,
<span class='line'>6306</span>  *                                         an ISO String like "2012-12-31T16:16:07.213Z",
<span class='line'>6307</span>  *                                         or a .Net Date string like
<span class='line'>6308</span>  *                                         "\/Date(1356970529389)\/"
<span class='line'>6309</span>  * @return {Date} parsedDate
<span class='line'>6310</span>  */</span><span class="WHIT">
<span class='line'>6311</span> </span><span class="NAME">links.Timeline.parseJSONDate</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">date</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6312</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">date</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6313</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">undefined</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6314</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6315</span> 
<span class='line'>6316</span> </span><span class="WHIT">    </span><span class="COMM">//test for date</span><span class="WHIT">
<span class='line'>6317</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">date</span><span class="WHIT"> </span><span class="KEYW">instanceof</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6318</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">date</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6319</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6320</span> 
<span class='line'>6321</span> </span><span class="WHIT">    </span><span class="COMM">// test for MS format.</span><span class="WHIT">
<span class='line'>6322</span> </span><span class="WHIT">    </span><span class="COMM">// FIXME: will fail on a Number</span><span class="WHIT">
<span class='line'>6323</span> </span><span class="WHIT">    </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">m</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">date.match</span><span class="PUNC">(</span><span class="REGX">/\/Date\((-?\d+)([-\+]?\d{2})?(\d{2})?\)\//i</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6324</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">m</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>6325</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">offset</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">m</span><span class="PUNC">[</span><span class="NUMB">2</span><span class="PUNC">]</span><span class="WHIT">
<span class='line'>6326</span> </span><span class="WHIT">            </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NUMB">3600000</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">m</span><span class="PUNC">[</span><span class="NUMB">2</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="COMM">// hrs offset</span><span class="WHIT">
<span class='line'>6327</span> </span><span class="WHIT">            </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NUMB">60000</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">m</span><span class="PUNC">[</span><span class="NUMB">3</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">m</span><span class="PUNC">[</span><span class="NUMB">2</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">/</span><span class="WHIT"> </span><span class="NAME">Math.abs</span><span class="PUNC">(</span><span class="NAME">m</span><span class="PUNC">[</span><span class="NUMB">2</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="COMM">// mins offset</span><span class="WHIT">
<span class='line'>6328</span> </span><span class="WHIT">            </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6329</span> 
<span class='line'>6330</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">new</span><span class="WHIT"> </span><span class="NAME">Date</span><span class="PUNC">(</span><span class="WHIT">
<span class='line'>6331</span> </span><span class="WHIT">            </span><span class="PUNC">(</span><span class="NUMB">1</span><span class="WHIT"> </span><span class="PUNC">*</span><span class="WHIT"> </span><span class="NAME">m</span><span class="PUNC">[</span><span class="NUMB">1</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="COMM">// ticks</span><span class="WHIT">
<span class='line'>6332</span> </span><span class="WHIT">                </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">offset</span><span class="WHIT">
<span class='line'>6333</span> </span><span class="WHIT">        </span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6334</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>6335</span> 
<span class='line'>6336</span> </span><span class="WHIT">    </span><span class="COMM">// failing that, try to parse whatever we've got.</span><span class="WHIT">
<span class='line'>6337</span> </span><span class="WHIT">    </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">Date.parse</span><span class="PUNC">(</span><span class="NAME">date</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6338</span> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>6339</span> </span></pre></body></html>